使用JS实现鼠标放上图片进行放大离开实现缩小功能
程序员文章站
2022-04-06 23:06:50
使用js实现鼠标放上图片进行放大离开实现缩小功能，具体代码如下所示：</tit...</div>
<div class="content">
<p>使用js实现鼠标放上图片进行放大离开实现缩小功能，具体代码如下所示：</p>
<div class="jb51code">
<pre class="brush: javascript;">
<!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></pre>
</div>
<p>分享源码，喜欢的朋友点击查看：</p>
<p><a target="_blank" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0L2ppYW9iZW4vNDYwNzk3Lmh0bWw=" rel="nofollow">基于jquery插件pinchzoom.js实现手指触摸图片放大缩小特效源码</a></p>
<p></p>
<p>到此这篇关于使用js实现鼠标放上图片进行放大离开实现缩小功能的文章就介绍到这了,更多相关js图片放大离开缩小内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！</p> </div>
<div class="tags">
相关标签： <a href="/t/js/" target="_blank">
js </a>
<a href="/t/%E5%9B%BE%E7%89%87/" target="_blank">
图片 </a>
<a href="/t/%E6%94%BE%E5%A4%A7/" target="_blank">
放大 </a>
<a href="/t/%E7%A6%BB%E5%BC%80%E7%BC%A9%E5%B0%8F/" target="_blank">
离开缩小 </a>
</div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/490756.html">
android studio Error:(1, 1) 错误: 非法字符: '\ufeff' 解决方案 </a>
</p>
<p>
下一篇： <a href="/article/490758.html">
MySQL中表的几种连接方式 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2057597.html" target="_blank" title="用HTML5实现鼠标滚轮事件放大缩小图片的功能">
<h2>
用HTML5实现鼠标滚轮事件放大缩小图片的功能 </h2>
</a>
</li>
<li>
<a href="/article/1994522.html" target="_blank" title="js实现图片旋转 js滚动鼠标中间对图片放大缩小">
<h2>
js实现图片旋转 js滚动鼠标中间对图片放大缩小 </h2>
</a>
</li>
<li>
<a href="/article/1860142.html" target="_blank" title="使用JS实现鼠标放上图片进行放大离开实现缩小功能">
<h2>
使用JS实现鼠标放上图片进行放大离开实现缩小功能 </h2>
</a>
</li>
<li>
<a href="/article/1140951.html" target="_blank" title="js实现图片旋转 js滚动鼠标中间对图片放大缩小">
<h2>
js实现图片旋转 js滚动鼠标中间对图片放大缩小 </h2>
</a>
</li>
<li>
<a href="/article/1059549.html" target="_blank" title="js实现图片放大缩小功能后进行复杂排序的方法_jquery">
<h2>
js实现图片放大缩小功能后进行复杂排序的方法_jquery </h2>
</a>
</li>
<li>
<a href="/article/1010633.html" target="_blank" title="如何使用JS+CSS3实现图片响应鼠标移动放大缩小">
<h2>
如何使用JS+CSS3实现图片响应鼠标移动放大缩小 </h2>
</a>
</li>
<li>
<a href="/article/807335.html" target="_blank" title="js实现图片放大缩小功能后进行复杂排序的方法_jquery">
<h2>
js实现图片放大缩小功能后进行复杂排序的方法_jquery </h2>
</a>
</li>
<li>
<a href="/article/490757.html" target="_blank" title="使用JS实现鼠标放上图片进行放大离开实现缩小功能">
<h2>
使用JS实现鼠标放上图片进行放大离开实现缩小功能 </h2>
</a>
</li>
<li>
<a href="/article/275305.html" target="_blank" title="用HTML5实现鼠标滚轮事件放大缩小图片的功能_html5教程技巧">
<h2>
用HTML5实现鼠标滚轮事件放大缩小图片的功能_html5教程技巧 </h2>
</a>
</li>
<li>
<a href="/article/189576.html" target="_blank" title="如何使用JS+CSS3实现图片响应鼠标移动放大缩小">
<h2>
如何使用JS+CSS3实现图片响应鼠标移动放大缩小 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>