淘宝商品图片放大效果,让客户更加清晰的看到商品。改善客户体验,提高商品的转化率,几乎所有的商城类网站都会用到这一技术,如果您还不会写,可以下载下来参考一下!

效果图:

          放大镜效果图

设计思维图:

            思维导图

jQuery代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
   /*鼠标移上去显示滑动区域以及放大的图片*/
    $(".shade").mouseover(function(){
        $(".box .move,.big_area").show();
    });
    $(".shade").mouseout(function(){
        $(".box .move,.big_area").hide();
    });
    /*鼠标滑动的时候*/
    $(".shade").mousemove(function(e){
        var W=e.clientX;//获得鼠标据浏览器左边的距离
        var H=e.clientY;//获得鼠标据浏览器上面的距离
        var L=$(".shade").offset().left-5;//获取遮罩层距离浏览器左边的距离
        var T=$(".shade").offset().top-5;//获取遮罩层距离浏览器上面的距离
        var mov_w=$(".move").width();//获取移动滑块的宽度
        var mov_h=$(".move").height();//获取移动滑块的高度
        var shade_w=$(".shade").width();//获取遮罩层的宽度
        var shade_h=$(".shade").height();//获取遮罩层的高度
        var _top=H-T-mov_h/2;
        var _left=W-L-mov_w/2;
        /*防止滑块移出图片区域*/
        if (_top<0)
        {
            _top=0;
        }else if (_top>shade_h-mov_h)
        {
            _top=shade_h-mov_h-2;
        }
        if (_left<0)
        {
            _left=0;
        }else if (_left>shade_w-mov_w)
        {
            _left=shade_w-mov_w-2;
        }
        var per_w=_left/(shade_w-mov_w);//滑块移动的宽度的百分比
        var per_h=_top/(shade_h-mov_h);//滑块移动的高度的百分比
        var big_w=$(".big_area").width();//获取放大区域的宽度
        var big_h=$(".big_area").height();//获取放大区域的高度
        var big_img_w=$(".big_area img").width();//获取放大图片的宽度
        var big_img_h=$(".big_area img").height();//获取放大图片的高度
        $(".box .move").css({top:_top,left:_left});
        $(".big_area img").css({top:-(big_img_h-big_h)*per_h,left:-(big_img_w-big_w)*per_w});
    });

注意事项:

    1、滑块移动要以遮罩层为参考对象,且遮罩层应该在滑块与图片的上方;

    2、放大区域图片的位置应该与滑块移动的方向相反(取负);

    3、放大区域图片可滑动距离为图片的长宽减去放大区域的长宽;

    4、用滑块移动的距离除以滑块的可移动距离等于big img移动的距离除以big img的可移动距离(通过百分比是这两个的区域内容同步)


源码下载:

1477582012602057.zip



ps:  1、压缩包密码:bulang123.cn;

         2、使用模板时请在底部注明:技术支持--浪族前端开发;

  3、如果您对模板有什么建议,可以给我们留言,我们会及时处理;

  4、如果您使用时有技术问题,可以加群(459450213)交流;

 * 下载本站模板以及作品仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *


官方公众号