编程 Javascript

使用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图片放大离开缩小内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

bug开发工程师.

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript—window对象使用示例

Dec 09 Javascript

JS操作CSS随机改变网页背景实现思路

Mar 10 Javascript

详解JS函数重载

Dec 04 Javascript

浅谈javascript中this在事件中的应用

Feb 15 Javascript

js实现文本框只允许输入数字并限制数字大小的方法

Aug 19 Javascript

jquery实现文本框textarea自适应高度

Mar 09 Javascript

js事件驱动机制浏览器兼容处理方法

Jul 23 Javascript

jQuery实现可拖拽3D万花筒旋转特效

Jan 03 Javascript

获取当前按钮或者html的ID名称实例(推荐)

Jun 23 Javascript

ES6 javascript中Class类继承用法实例详解

Oct 30 Javascript

详解Node.js中path模块的resolve()和join()方法的区别

Oct 29 Javascript

JavaScript高阶教程之“==”隐藏下的类型转换

Apr 11 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