jquery 产品查看放大镜组件 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片放大镜</title>
</head>
<style>
*{ padding:0; margin:0}
.fdj{}
.fdj .small-wrap{ overflow:hidden; float:left}
.fdj .small-main{ width:266px; height:231px; position:relative}
.fdj .small-main img{ width:100%; height:100%}
.fdj .small-main .mask{ display:none; cursor:crosshair; position:absolute; left:0; top:0;width:100px; height:80px; background:rgba(0,0,0,.3)}
.fdj .bot-main{ width:266px; height:70px; overflow:hidden; position:relative;background-color: #F1F0F0; margin-top:2px;}
.fdj .bot-main .btn{ z-index:99; cursor:pointer; position:absolute; top:0; width:14px; height:70px; background-color:#ccc; color:#fff; line-height:70px; text-align:center}
.fdj .bot-main .prev{ left:0;}
.fdj .bot-main .next{ right:0;}
.fdj .bot-main .pic-list{ width:238px; height:70px; position:absolute; left:14px;}
.fdj .bot-main .list{ width:3000px; position:absolute; left:0; top:0;}
.fdj .bot-main .list li{ float:left; list-style:none}
.fdj .bot-main .list img{ width:70px; height:46px; margin:12px 0 0 4px;border:2px solid #F1F0F0}
.fdj .bot-main .list .active img{border:2px solid #959595}
.fdj .big-wrap{width:266px; height:231px; border:1px solid #ccc; float:left; overflow:hidden; display:none; position:relative}
.fdj .big-wrap img{ position:absolute; left:0; top:0; min-width:600px; min-height:700px;}
</style>
<body>

<div class="fdj imageZoom">
    <div class="small-wrap">
        <div class="small-main">
            <img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg">
            <div class="mask"></div>
        </div>
        <div class="bot-main">
            <span class="btn prev">《</span>
            <div class="pic-list">
                <ul class="list">
                    <li class="active"><img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg"></li>
                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e6e0ced0c.jpg"></li>
                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e6888e257.jpg"></li>
                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e5bedce24.jpg"></li>
                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e481ac8e8.png"></li>
                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e2c9725f8.jpg"></li>
                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150923/56023b44d65e2.jpg"></li>
                </ul>
            </div>
            <span class="btn next">》</span>
        </div>
    </div>
    <div class="big-wrap"><img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg"></div>
</div>
<script src="soft/js/global.js"></script>
<script>
;(function(){
    $.fn.imageZoom = function(options){
        var defaults = {};
        var sets = $.extend(defaults , options);
        
        this.each(function(){
            var _this=$(this);
            var small_wrap=_this.find(".small-main");//小图
            var big_wrap=_this.find(".big-wrap");//大图
            var mask=_this.find(".mask");//遮罩
            var oul=_this.find('ul');
            var oli=oul.find('li');
            var i=0,small_w,small_h,big_w,big_h,blc_w,blc_h;
            oul.width(oli.outerWidth(true)*oli.length);
            
            //切换缩略图
            _this.find('.next').click(function(){
                i>=oli.length-3?i=0:i++;
                oul.animate({'left':-i*oli.outerWidth(true)});
            });
            _this.find('.prev').click(function(){
                i<=0?i=oli.length-3:i--;
                oul.animate({'left':-i*oli.outerWidth(true)});
            });
            
            oli.hover(function(){
                var _src=$(this).find("img").attr('src');
                $(this).addClass("active").siblings().removeClass("active");
                small_wrap.find("img").attr("src",_src);
                big_wrap.find("img").attr("src",_src);
            });
            
            //小图移动
            small_wrap.mousemove(function(e){
                small_w=small_wrap.width()-mask.width();
                small_h=small_wrap.height()-mask.height();
                big_w=big_wrap.find("img").width()-big_wrap.width();
                big_h=big_wrap.find("img").height()-big_wrap.height();
                blc_w=small_w/big_w;
                blc_h=small_h/big_h;
            
                mask.show();
                big_wrap.show();
                var maskLeft = mask.position().left;
                var maskTop = mask.position().top;
                var X=e.pageX-mask.width()/2;
                var Y=e.pageY-mask.height()/2;
                if(X<=0){X=0};
                if(Y<=0){Y=0};
                if(X>=$(this).width()-mask.width()){
                    X=$(this).width()-mask.width()
                };
                if(Y>=$(this).height()-mask.height()){
                    Y=$(this).height()-mask.height()
                };
                mask.css({'left':X,'top':Y});
                big_wrap.find("img").css({'left':-X/blc_w,'top':-Y/blc_h});
            }).mouseout(function(){
               mask.hide();
               big_wrap.hide();
            });    
        });
    };
})(jQuery)

$(function(){
    $('.imageZoom').imageZoom();

})
</script>
</body>
</html>

 实例截图：

posted @ 2016-07-26 16:47  还能再菜点吗？  阅读(160)  评论(0)  编辑  收藏  举报