zoukankan      html  css  js  c++  java
  • 仿淘宝商品放大镜效果

    效果图:

    源码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {margin: 0;padding: 0;}
            img {
                vertical-align: top;
            }
            .box {
                width: 350px;
                height: 350px;
                margin:100px;
                border: 1px solid #ccc;
                position: relative;
            }
            .big {
                width: 450px;
                height: 450px;
                position: absolute;
                top: 0;
                left: 360px;
                border: 1px solid #ccc;
                overflow: hidden;
                display: none;
            }
            .mask {
                width: 100px;
                height: 100px;
                background: rgba(255, 255, 0, 0.4);
                position: absolute;
                top: 0;
                left: 0;
                cursor: move;
                display: none;
            }
            .small {
                position: relative;
            }
            .big img {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
    <div class="box" id="fdj">
        <!--小盒子-->
        <div class="small">
            <img src="001.jpg" alt=""/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="0001.jpg" alt=""/>
        </div>
    </div>
    </body>
    </html>
    <script>
        var fdj = document.getElementById("fdj");  // 获得最大的盒子
        var small = fdj.children[0];  // 获得small 小图片 350盒子
        var big = fdj.children[1];  // 获得 大图片 800 盒子
        var mask = small.children[1];  // 小的黄色盒子
        var bigImage = big.children[0]; // 大盒子里面的图片
        small.onmouseover = function() {   // 鼠标经过显示出他们
            mask.style.display = "block";
            big.style.display = "block";
        }
        small.onmouseout = function() {
            mask.style.display = "none";
            big.style.display = "none";
        }
        //  鼠标在small 内移动
        var x = 0;
        var y = 0;
        small.onmousemove = function(event) {
            var event = event || window.event;
            x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;  // 再某个盒子内的坐标
            //alert(this.offsetLeft);
            y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
            if(x < 0)
            {
                x = 0;
            }
            else if(x > small.offsetWidth - mask.offsetWidth)
            {
                x = small.offsetWidth - mask.offsetWidth;
            }
            if(y<0)
            {
                y = 0;
            }
            else if(y > small.offsetHeight - mask.offsetHeight)
            {
                y = small.offsetHeight - mask.offsetHeight;
            }
            mask.style.left = x + "px";
            mask.style.top = y + "px";
            /*计算  :  夫子 一顿吃 2个馒头    娇子  一顿 4个馒头
             问  夫子今天吃了 3个馒头  娇子应该吃几个?  */
            /*计算出他们的倍数   4 / 2    2倍
             3 * 2  == 6个  */
            /* 大图盒子 /  小图盒子  倍数
             我们 再小图移动的距离 *  倍数  ==  大图的位置*/
            bigImage.style.left =  -x *  big.offsetWidth /small.offsetWidth + "px";
            bigImage.style.top =  -y *  big.offsetHeight /small.offsetHeight + "px";
    
        }
    </script>

  • 相关阅读:
    diary and html 文本颜色编辑,行距和其它编辑总汇
    bash coding to changeNames
    virtualbox ubuntu 网络连接 以及 连接 secureCRT
    linux 学习6 软件包安装
    linux 学习8 权限管理
    vim 使用2 转载 为了打开方便
    ubuntu
    linux 学习15 16 启动管理,备份和恢复
    linux 学习 14 日志管理
    linux 学习 13 系统管理
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/10003403.html
Copyright © 2011-2022 走看看