JS 实现鼠标指向图片时图片放大的效果

<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="你的图片路径" style="cursor:pointer;width:100px;height:100px;" />
<script type="text/javascript">
 var img = document.getElementById('img');

 function bigger(){
  img.style.width = '400px';
  img.style.height = '400px';
 }

 function smaller(){
  img.style.width = '100px';
  img.style.height = '100px';
 }
</script>
  • 9
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
实现鼠标悬停图片放大效果,可以通过以下几种方式: 1. 使用CSS transform属性 可以使用CSS的transform属性来实现图片放大效果。将图片的缩放比例设为1.2或其他比例,当鼠标悬停在图片上时,将缩放比例改为1或原来的比例。 示例代码: ```html <style> .img-zoom { transition: transform .2s; } .img-zoom:hover { transform: scale(1.2); } </style> <img src="image.jpg" class="img-zoom"> ``` 2. 使用JavaScript和CSS 通过JavaScript来改变图片的样式,实现图片放大效果。当鼠标悬停在图片上时,将图片的宽高增加一定比例,当鼠标移开时,将图片宽高恢复到原来的大小。 示例代码: ```html <style> .img-zoom { transition: width .2s, height .2s; } </style> <img src="image.jpg" class="img-zoom" onmouseover="zoomIn(this)" onmouseout="zoomOut(this)"> <script> function zoomIn(img) { img.style.width = (img.clientWidth * 1.2) + "px"; img.style.height = (img.clientHeight * 1.2) + "px"; } function zoomOut(img) { img.style.width = ""; img.style.height = ""; } </script> ``` 3. 使用jQuery插件 可以使用一些开源的jQuery插件来实现图片放大效果,比如zoom.js、fancybox等。 使用zoom.js实现图片放大效果的示例代码: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script> <img src="image.jpg" data-zoom-image="image-large.jpg"> <script> $('img').zoom(); </script> ``` 以上是实现鼠标悬停图片放大的几种方式,可以根据实际需求选择适合的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值