js 实现图片的局部放大效果

最新推荐文章于 2024-07-12 21:49:18 发布

kai161

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量9.4k

点赞数

本文链接：https://blog.csdn.net/kai161/article/details/9384375

版权

本文介绍如何利用JavaScript创建一种常见的电商网站功能——当鼠标悬停在图片上时，实现图片的局部放大效果。核心思路是通过创建一个放大版的图片元素，并调整其位置以模拟放大效果。

摘要由CSDN通过智能技术生成

很多的网上商城都有鼠标在图片上移动时能将局部图放大的JS效果，今天自己也做了个，

实现该效果的原理是：在图片原有的宽高大小基础上再重新定义一个放大了X倍的图片<img width=this.width*X,height=this.height*x scr='原图地址'/>，然后通过对大图位置偏移的设置来起到放大图片的效果。

直接上代码：

<head>
    <title></title>
    <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <style type="text/css" >
    #bigimg
    {
          position:absolute;
          display:none;
          overflow:hidden;
          height:200px;
          width:200px;
    }
    #smalldiv
    {
       position:absolute;
       display:none; 
          
    }
    </style>
    <script type="text/javascript">
        $(function () {
            var count = 0;

            $("#img").mousemove(function (e) {
                var sm