使用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模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
原生js实现碰撞检测
Mar 12 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
JSF界面控制层技术
2013/06/17 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
共产党员承诺书
2014/03/25 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
先进人物事迹材料
2014/12/29 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android