商城放大镜效果原理

最新推荐文章于 2021-11-15 13:43:59 发布

小玉酱粉刷墙

最新推荐文章于 2021-11-15 13:43:59 发布

阅读量965

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xiaoyujiangfens/article/details/53929214

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

放大镜效果的原理为  已知A B C  A/B=C/D;  求D;

A为小图的offsetWidth  C为大图的offsetWidth   B为小图移动的距离  D为对应大图的移动的距离

javascript原生的如下:

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        #smallBox{
            position:relative;
            border:1px solid #ccc;
            display: block;
            width: 400px;
            height: 400px;
            margin: 50px;
        }
        #floatBox{
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        #bigBox {
            display: none;
            position:absolute;
            top:50px;
            z-index:6;
            left: 460px;
            width: 400px;
            height: 400px;
            overflow: hidden;
            border: 1px solid #ccc;
        }


        #bigBox img{
            position:absolute;
        }
    </style>
</head>
<body>
<div id="smallBox">
    <div id="floatBox"></div>
    <img title="small img" src="img/xiong1mi.jpg">
</div>
<div id="bigBox">
    <img title="bigger img" src="img/xiong1.jpg">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
     window.onload=function(){
         var smallBox=document.getElementById("smallBox");
         var bigBox=document.getElementById("bigBox");
         var floatBox=document.getElementById("floatBox");
         var bigImg=bigBox.getElementsByTagName("img")[0];
         smallBox.οnmοuseοver=function(){
             floatBox.style.display = "block";
             bigBox.style.display = "block";
         }
         smallBox.οnmοuseοut=function(){
             floatBox.style.display = "none";
             bigBox.style.display = "none";
         }
         smallBox.οnmοusemοve=function(event){
             var e=event||window.event;
             var left= e.clientX-smallBox.offsetLeft-floatBox.offsetWidth/2;
             var top = e.clientY-smallBox.offsetTop-floatBox.offsetHeight/2;
             if (left < 0) {
                 left = 0;
             } else if (left > (smallBox.offsetWidth - floatBox.offsetWidth)) {
                 left = smallBox.offsetWidth - floatBox.offsetWidth;
             }

             if (top < 0) {
                 top = 0;
             } else if (top > (smallBox.offsetHeight - floatBox.offsetHeight)) {
                 top = smallBox.offsetHeight - floatBox.offsetHeight;
             }
             floatBox.style.left=left+"px";
             floatBox.style.top=top+"px";
             bigImg.style.left=-(left*bigBox.offsetWidth)/smallBox.offsetWidth+"px";
             bigImg.style.top=-(top*bigBox.offsetHeight)/smallBox.offsetHeight+"px";


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

小玉酱粉刷墙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商城放大镜效果原理

放大镜效果的原理为已知A B C A/B=C/D; 求D;A为小图的offsetWidth C为大图的offsetWidth B为小图移动的距离 D为对应大图的移动的距离javascript原生的如下:html>html>head lang="en"> meta charset="UTF-8"> title>title> style>
复制链接

扫一扫