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

最新推荐文章于 2021-12-04 12:24:12 发布

kai161

最新推荐文章于 2021-12-04 12:24:12 发布

阅读量9.3k

点赞数

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

版权

很多的网上商城都有鼠标在图片上移动时能将局部图放大的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

最低0.47元/天解锁文章

kai161

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js 实现图片的局部放大效果

很多的网上商城都有鼠标在图片上移动时能将局部图放大的JS效果，今天自己也做了个，实现该效果的原理是：在图片原有的宽高大小基础上再重新定义一个放大了X倍的图片，然后通过对大图位置偏移的设置来起到放大图片的效果。直接上代码： #bigimg { position:absolute; display:
复制链接

扫一扫