最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jquery仿淘宝图片放大镜演示

来源:http://www.erdangjiade.com/ 二当家的 2016-07-01 21:41浏览(1570)

这是一款仿淘宝官网商品详情页的图片放大效果,每张图片我们得准备两张图片,一个是看到的图片,另张是缩略图,借助放大镜插件,来制作图片局部放大的效果。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jquery仿淘宝图片放大镜演示
分类:图片代码 > 缩略图 难易:中级
查看演示 下载资源: 112

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

缩略图和大图片

<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();
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/883.html
评论2
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 椅子
    07-23 20:13
    ngu137
    不错的特效必须收藏起来。。。
  • 头像 沙发
    03-07 08:16
    ngu137
    不错的放大镜特效啊。。。
1 2