jQuery(非插件)制作商城放大镜效果

这个功能时很常见的功能,也很简单!

首先我们来看一看这个效果如下图:

功能分析:

①作为商城的放大镜, 我们需要注意的是, 准备的是两张图片.

一张图片是商品图[左图], 另一张图片是大图[其实就是被放大后暂时的图片];

②镜片, 在商品图上, 当鼠标放上去出现的"小镜片", 如图中的绿色透明部分.

 

我们需要知道, 且必须知道, 我们要解决的问题是:

1. 放在商品上, 小镜片出现, 鼠标移动, 小镜片跟随移动.[且不超过商品区域]

2. 右侧出现大图, 且大图移动.

3. 保证小镜片和右侧的展示区域框大小有一定关系.

 

设计思路:

首先要准备两张图片（一个是小的预览图，一个是很大的高清图）
然后写一个DIV，里面放一个IMG和一个DIV

然后给img绑定mousemove事件，在事件内写下如下实现的代码

首先计算出鼠标在这个img标签上的相对坐标，如果是在img的最左上边。坐标则为0,0
然后吧这个DIV内部的小DIV固定为100*100大小，然后再就是计算它的比例。
然后再把这个DIV的背景设置成那个大图，然后再用背景的绝对定位进行移动即可.

代码如下[没有精简的代码]:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商城放大镜特效</title>
    <style>
        *{
            padding:0;margin:0;
        }
        img {
            border:none;
            outline: none;
            display: block;
            margin:auto;
        }
        .big,.small{
            width:340px;
            height:255px;
            border:1px solid black;
            float:left;
            position: relative;
        }
        .big{/*大图,超出部分溢出隐藏*/
            width:200px;height:200px;
            overflow: hidden;
            display: none;
            margin-left: 5px;
        }
        .small .move{/*小镜片*/
            width:120px;height:120px;
            background-color: green;
            opacity:0.4;
            filter:alpha(opacity=40);
            position: absolute;
            z-index: 1;
            top:0;left:0;
            display: none;
        }
        .box{
            border:1px solid red;
            height:400px;
            width:800px;
            margin:auto;
            padding-top: 45px;
            padding-left: 45px;
        }
        .big img{
            width:800px;height:600px;
            position: absolute;
            top:0;left:0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="small">
            <img src="images/s.jpg" width="340" height="255" alt="" />
            <i class="move"></i>
        </div>
        <div class="big">
            <img src="images/b.jpg" width="800" height="600" alt="" />
        </div>
    </div>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function () {
            //1. 放在图片上出现小镜片
            //鼠标距离浏览器左边的距离
            //small距离浏览器左边的距离
            //小镜片的距离100/2
            var move = $(".move");
            var small = $(".small");
            var jw = move.width();//小镜片的宽度
            var jh = move.height();//小镜片的高度
            var sW = small.width();//展示框的宽
            var sH = small.height();//展示框的高
            var sL = small.offset().left;//small距离里浏览器左侧距离
            var sT = small.offset().top;//small距离浏览器顶部的距离
            var big = $(".big");
            var showImg = big.find('img');
            var bW = showImg.width();
            var bH = showImg.height();
            var mW = (bW/sW)*jw;
            var mH = (bH/sH)*jh;
            big.css({"width":mW,"height":mH});
            var multiple = (bW/sW);//右侧区域和小镜片的关系
            $(".small").bind("mousemove",function (e){
                move.show();
                big.show();
                var mL = e.pageX;//鼠标距离浏览器左侧距离
                var mT = e.pageY;//鼠标距离浏览器顶部的距离
                var left = mL-sL - (jw/2);
                var top = mT - sT - (jh/2);
                left = left<= 0 ? 0 : left;
                left = left>= (sW-jw) ? (sW-jw) : left;
                top = top <= 0 ? 0 : top;
                top = top >= (sH-jh) ? (sH-jh) : top;
                // console.log("left: "+left + "// top: "+top);
                move.css({"left":left,"top":top});
                showImg.css({"left":-left*multiple,"top":-top*multiple});//大图
            }).bind("mouseout",function () {
                move = $(".move").hide();
                big.hide();
            });
        });
    </script>
</body>
</html>

特别提示:

大图和小图之间的关系是倍数关系, 这样可以方便计算. 所以如果和前端配合时, 这一点有时容易被忽略掉.

 

posted @ 2015-05-01 13:50  Zell~Dincht  阅读(289)  评论(0)  编辑  收藏  举报