JQ实战天猫淘宝放大镜

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ实战天猫淘宝放大镜相关的知识,希望对你有一定的参考价值。

这个特效平时生活中很常见,话不多说先上效果图。

技术分享

首先布局,遮罩层是这个效果中的重点精华,也就是下面代码中的shade.

<style>
* { margin:0px; padding:0px;}
#box { width:400px; height:400px; border:5px solid #CCC; margin:100px auto; position:relative;}
#box .simg {width:400px; height:400px; position:relative;}
#box .simg span.move { width:150px; height:150px; background:red; position:absolute; top:0; left:0; display:block; filter:alpha(opacity=50); opacity:0.5; display:none;}
#box .simg span.shade { width:100%; height:100%; position:absolute; top:0; left:0;filter:alpha(opacity=40); opacity:0.4;}
#box .bimg { width:300px; height:300px; position:absolute; left:430px; top:50px; overflow:hidden; display:none;}
#box .bimg img { position:absolute;}
</style>
</head>

<body>
<div id="box">
    <div class="simg">
        <img src="images/simg.jpg"/>
        <span class="move"></span>
        <span class="shade"></span>
    </div>
    <div class="bimg"><img src="images/bimg.jpg"/></div>
</div>

接下来是JS部分,在实现放大的效果时,小图滑动的比例与大图定位时的相对应的top,left,是效果的关键。

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
    $(function(){
        $(".shade").hover(function(){
            $(".move").show();
            $(".bimg").show();
            },function(){
            $(".move").hide();
            $(".bimg").hide();
                });
        $(".shade").mousemove(function(e){
            var l=e.clientX;
            var t=e.clientY;

            var _top=t-$("#box").offset().top-$(".move").height()/2+"px";
            var _left=l-$("#box").offset().left-$(".move").width()/2+"px";
            
            //不让从上面和下面出去
            if(parseInt(_top)<0){
                _top=0+‘px‘;
                }else if(parseInt(_top)>parseInt($("#box").height()-$(".move").height())){
                    _top=parseInt($("#box").height()-$(".move").height())+"px";
                    }
                    
            //不让从两边出去
            if(parseInt(_left)<0){
                _left=0+"px";
                }else if(parseInt(_left)>parseInt($("#box").width()-$(".move").width())){_left=parseInt($("#box").width()-$(".move").width())+‘px‘;}
            
            $(".move").css({top:_top,left:_left});
            
            //小图可滑动的比例
            var hd_x=parseInt(_left)/parseInt($("#box").width()-$(".move").width());
            var hd_y=parseInt(_top)/parseInt($("#box").height()-$(".move").height());
            
            //大图对应的top left
            var bm_left=($(".bimg img").width()-$(".bimg").width())*hd_x;
            var bm_top=($(".bimg img").height()-$(".bimg").height())*hd_y;
            $(".bimg img").css({top:-bm_top,left:-bm_left});
            
            
            });        
                
        
        });


</script>

最后写的有点快,代码不够简洁,注释也挺恶心,有时间修正。

以上是关于JQ实战天猫淘宝放大镜的主要内容,如果未能解决你的问题,请参考以下文章

淘宝,天猫,京东都是谁创立的?

淘宝,天猫,京东都是谁创立的?

淘宝天猫购物卡500的是真的吗可以直接用500元?

请帮忙用js或php写一个可以采集淘宝和天猫商品优惠价格的代码用函数方

JavaScript之图片操作5

大淘宝技术行业FaaS化实战经验分享