使用JS实现鼠标放上图片进行放大离开实现缩小功能


Posted in Javascript onJanuary 27, 2021

使用JS实现鼠标放上图片进行放大离开实现缩小功能,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id= 'div_jpg' style="width: 200px;height: 200px;">
		<img src="./128206.jpg" id="img" style="width: 100%;height: 100%;">
	</div>
	<script>
		var img = document.getElementById('img')
		var s1,s2
		console.log(img)
		// 图片放大效果
		i = 100;
		img.addEventListener('mouseover',function(){
			clearInterval(s1);
			s1 = setInterval(function(){
				i+=0.1;
				img.style.width = (i)+'%';
				img.style.height = (i)+'%';
				i = parseFloat(i);
				if(i>=120) clearInterval(s1);
			},1);
		})
		img.addEventListener('mouseout',function(){
			clearInterval(s2);
			s2 = setInterval(function(){
				i-=0.1;
				img.style.width = (i)+'%';
				img.style.height = (i)+'%';
				i = parseFloat(i);
				if(i<=100) clearInterval(s2); 
			})
		})

	</script>
</body>
</html>

分享源码,喜欢的朋友点击查看:

到此这篇关于使用JS实现鼠标放上图片进行放大离开实现缩小功能的文章就介绍到这了,更多相关js图片放大离开缩小内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
js实现鼠标切换图片(无定时器)
Jan 27 #Javascript
JavaScript实现切换多张图片
Jan 27 #Javascript
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
JavaScript实现点击切换功能
Jan 27 #Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
Vue精简版风格概述
2018/01/30 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python ddt实现数据驱动
2018/03/14 Python
python实现二维插值的三维显示
2018/12/17 Python
python重试装饰器的简单实现方法
2019/01/31 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
财政专业求职信范文
2014/02/19 职场文书
二手房购房意向书范本
2014/04/01 职场文书
报告会主持词
2014/04/02 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
史上最牛的辞职信
2015/02/28 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Go并发4种方法简明讲解
2022/04/06 Golang