电商平台放大镜效果

1、js写一个放大镜

 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
　　　　<style type="text/css">
　　　　　　#demo { display: block; width: 400px;height: 255px;margin: 50px; position: relative; border: 1px solid #ccc; }
　　　　　　#small-box {position: relative;z-index: 1;}
　　　　　　#float-box {display: none;width: 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #ccc;filter: alpha(opacity=50);opacity: 0.5;}
　　　　　　#mark {position: absolute;display: block; width: 400px;height: 255px;background-color: #fff;filter: alpha(opacity=0);opacity: 0;z-index: 10; }
　　　　　　#big-box {display: block;position: absolute;top: 0;left: 460px;width: 400px;height: 300px;overflow: hidden;border: 1px solid #ccc;z-index: 1;}
　　　　　　#big-box img {position: absolute;z-index: 5}
　　　　</style>

    <script>

        //页面加载完毕后执行
        window.onload = function () {
            var objDemo = document.getElementById("demo");
            var objSmallBox = document.getElementById("small-box");
            var objMark = document.getElementById("mark");
            var objFloatBox = document.getElementById("float-box");
            var objBigBox = document.getElementById("big-box");
            var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
            objMark.onmouseover = function () {
                objFloatBox.style.display = "block"
                objBigBox.style.display = "block"
            }
            objMark.onmouseout = function () {
                objFloatBox.style.display = "none"
                objBigBox.style.display = "none"
            }
            objMark.onmousemove = function (ev) {
                var _event = ev || window.event; 
                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                if (left < 0) {
                    left = 0;
                } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
                    left = objMark.offsetWidth - objFloatBox.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
                    top = objMark.offsetHeight - objFloatBox.offsetHeight;
                }
                objFloatBox.style.left = left + "px"; 
                objFloatBox.style.top = top + "px";
                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
            }
        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="macbook-big.jpg"/>
    </div>
</div>
</body>
</html>

 

 

 

2、jquery写一个放大镜

 

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://www.longre.com/peter_js/jquery.min(1.11.1).js"></script>

        <style>
            .all{margin:50px;position: relative;}
            .xBox{width:400px;height:255px;border:1px #666 solid;position: relative;}
            .ceng{width:400px;height:255px;background:fff;opacity: 0;position: absolute;top:0;left:0;z-index: 2;}
            .mok{width:160px;height:120px;background:rgba(0,0,0,0.1);position: absolute;top:0;left:0;display:none;}
            .dBox{width:400px;height:300px;border:1px #666 solid;overflow: hidden;position: absolute;top:0;left:600px;display:block;}
            .dBox img{position: absolute;top:0;left:0;}
        </style>
    </head>
    <body>
        <div class="all">
            <div class="xBox">
                <div class="mok"> </div>
                <div class="ceng"></div>
                <img src="macbook-small.jpg" />
            </div>
            <div class="dBox">
                <img src="macbook-big.jpg" />
            </div>
        </div>
    </body>
</html>
<script>
$(function(){
    $(".ceng").mouseover(function() {
       $(".mok").fadeIn();
       $(".dBox").fadeIn();
    });
    $(".ceng").mouseout(function() {
       $(".mok").fadeOut();
       $(".dBox").fadeOut();
    });

    $(".ceng").mousemove(function(e) {
        var left = e.clientX-$('.xBox').offset().left-$(".mok").width()/2 ;
        var top = e.clientY-$('.xBox').offset().top-$(".mok").height()/2;
        var mmokLeft = $(".xBox").width()-$(".mok").width();
        var mmokTop = $(".xBox").height()-$(".mok").height();

        if(left <= 0){
            left = 0;
        }else if(left>mmokLeft){
            left = mmokLeft;
        }
        if(top <= 0){
            top = 0;
        }else if(top>mmokTop){
            top = mmokTop;
        }
        var l = $(".dBox").width()*left/$(".mok").width();
        var t = $(".dBox").height()*top/$(".mok").height();
        $(".mok").css("left",left+"px");
        $(".mok").css("top",top+"px");
        $(".dBox img").css("left", "-"+l+"px");
        $(".dBox img").css("top", "-"+t+"px");
    });
    
})
       
</script>

 

posted @ 2019-07-16 15:33  张小中  阅读(206)  评论(0)    收藏  举报