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

使用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>
    

分享源码，喜欢的朋友点击查看：

基于jQuery插件Pinchzoom.js实现手指触摸图片放大缩小特效源码

jquery鼠标悬停图片放大滑动显示标题特效

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

• js实现点击图片在屏幕中间弹出放大效果
• js实现图片放大展示效果
• js实现图片旋转 js滚动鼠标中间对图片放大缩小
• JS点击缩略图整屏居中放大图片效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！