• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
Vonice 显示全部楼层 发表于 2021-10-25 19:35:19 |阅读模式 打印 上一主题 下一主题
利用JS实现鼠标放上图片进行放大脱离实现缩小功能,具体代码如下所示:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title></title>
  5. </head>
  6. <body>
  7.         <div id= 'div_jpg' style="width: 200px;height: 200px;">
  8.                 <img src="./128206.jpg" id="img" style="width: 100%;height: 100%;">
  9.         </div>
  10.         <script>
  11.                 var img = document.getElementById('img')
  12.                 var s1,s2
  13.                 console.log(img)
  14.                 // 图片放大效果
  15.                 i = 100;
  16.                 img.addEventListener('mouseover',function(){
  17.                         clearInterval(s1);
  18.                         s1 = setInterval(function(){
  19.                                 i+=0.1;
  20.                                 img.style.width = (i)+'%';
  21.                                 img.style.height = (i)+'%';
  22.                                 i = parseFloat(i);
  23.                                 if(i>=120) clearInterval(s1);
  24.                         },1);
  25.                 })
  26.                 img.addEventListener('mouseout',function(){
  27.                         clearInterval(s2);
  28.                         s2 = setInterval(function(){
  29.                                 i-=0.1;
  30.                                 img.style.width = (i)+'%';
  31.                                 img.style.height = (i)+'%';
  32.                                 i = parseFloat(i);
  33.                                 if(i<=100) clearInterval(s2);
  34.                         })
  35.                 })
  36.         </script>
  37. </body>
  38. </html>
复制代码
分享源码,喜好的朋侪点击查看:
基于jQuery插件Pinchzoom.js实现手指触摸图片放大缩小殊效源码
jquery鼠标悬停图片放大滑动显示标题殊效
到此这篇关于利用JS实现鼠标放上图片进行放大脱离实现缩小功能的文章就介绍到这了,更多相关js图片放大脱离缩小内容请搜索草根技术分享以前的文章或继续浏览下面的相关文章盼望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作