jquery仿淘宝图片放大镜演示

来源:https://www.sucaihuo.com/js/883.html 2016-07-01 21:41浏览(1805) 收藏

这是一款仿淘宝官网商品详情页的图片放大效果,每张图片我们得准备两张图片,一个是看到的图片,另张是缩略图,借助放大镜插件,来制作图片局部放大的效果。
jquery仿淘宝图片放大镜演示
分类:图片代码 > 缩略图 难易:中级
查看演示 下载资源: 286 下载资源 下载积分: 20 积分

缩略图和大图片

<div class="con-FangDa" id="fangdajing">
    <div class="con-fangDaIMg">
        <!-- 正常显示的图片-->
        <img src="images/big/1.jpg">
        <!-- 滑块-->  
        <div class="magnifyingBegin"></div>
        <!-- 放大镜显示的图片 -->
        <div class="magnifyingShow"><img src="images/big/1.jpg"></div>
    </div>

    <ul class="con-FangDa-ImgList">
        <!-- 图片显示列表 -->
        <li class="active"><img src="images/thumb/1.jpg" data-bigimg="images/big/1.jpg"></li>
        <li><img src="images/thumb/2.jpg" data-bigimg="images/big/2.jpg"></li>
        <li><img src="images/thumb/3.jpg" data-bigimg="images/big/3.jpg"></li>
        <li><img src="images/thumb/4.jpg" data-bigimg="images/big/4.jpg"></li>
        <li><img src="images/thumb/5.jpg" data-bigimg="images/big/5.jpg"></li>
    </ul>
</div>

magnifying放大镜插件

$.fn.magnifying = function() {
    var that = $(this),
            $imgCon = that.find('.con-fangDaIMg'), //正常图片容器
            $Img = $imgCon.find('img'), //正常图片,还有放大图片集合
            $Drag = that.find('.magnifyingBegin'), //拖动滑动容器
            $show = that.find('.magnifyingShow'), //放大镜显示区域
            $showIMg = $show.find('img'), //放大镜图片
            $ImgList = that.find('.con-FangDa-ImgList > li >img'),
            multiple = $show.width() / $Drag.width();

    $imgCon.mousemove(function(e) {
        $Drag.css('display', 'block');
        $show.css('display', 'block');
        //获取坐标的两种方法
        // var iX = e.clientX - this.offsetLeft - $Drag.width()/2,
        // 	iY = e.clientY - this.offsetTop - $Drag.height()/2,	
        var iX = e.pageX - $(this).offset().left - $Drag.width() / 2,
                iY = e.pageY - $(this).offset().top - $Drag.height() / 2,
                MaxX = $imgCon.width() - $Drag.width(),
                MaxY = $imgCon.height() - $Drag.height();

        /*这一部分可代替下面部分,判断最大最小值
         var DX = iX < MaxX ? iX > 0 ? iX : 0 : MaxX,
         DY = iY < MaxY ? iY > 0 ? iY : 0 : MaxY;
         $Drag.css({left:DX+'px',top:DY+'px'});	   		
         $showIMg.css({marginLeft:-3*DX+'px',marginTop:-3*DY+'px'});*/

        iX = iX > 0 ? iX : 0;
        iX = iX < MaxX ? iX : MaxX;
        iY = iY > 0 ? iY : 0;
        iY = iY < MaxY ? iY : MaxY;
        $Drag.css({left: iX + 'px', top: iY + 'px'});
        $showIMg.css({marginLeft: -multiple * iX + 'px', marginTop: -multiple * iY + 'px'});
        //return false;
    });
    $imgCon.mouseout(function() {
        $Drag.css('display', 'none');
        $show.css('display', 'none');
    });

    $ImgList.click(function() {
        var NowSrc = $(this).data('bigimg');
        $Img.attr('src', NowSrc);
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
}

$("#fangdajing").magnifying();
标签: 缩略图放大镜
评论11
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 10楼
    03-23 08:18
    笑***生
    做的很好,打算自己也写一个试试
  • 头像 9楼
    08-22 10:25
    1***3
    放大镜用上感觉好
  • 头像 8楼
    08-13 14:28
    最***句
    这个挺好的。
  • 头像 7楼
    07-26 22:57
    l***0
    这个不是鼠标放上去就切换
  • 头像 6楼
    07-22 08:50
    昨***楼
    原来有两种获取坐标点的方法
  • 头像 5楼
    07-06 15:01
    h***6
    很实用的放大效果
  • 头像 4楼
    07-05 09:02
    j***t
    这个跟淘宝放大类似啊
  • 头像 3楼
    07-04 16:12
    q***0
    正好用到 感谢楼主
  • 头像 板凳
    07-04 00:18
    2***8
    效果很实用龇牙
  • 头像 椅子
    07-02 13:59
    a***g
    实用的一个模版啊~呵呵淡定
1 2