zoukankan      html  css  js  c++  java
  • 电商网站常用放大镜特效

    预览效果:

    类似于之前做过的裁剪预览效果

    HTML、CSS代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="demo.js"></script>
        <style>
            #demo{
                display: block;
                width: 330px;
                height: 220px;
                margin: 50px;
                position: relative;
                border: 1px solid darkorange;
            }
            img{
                width: 330px;
                height: 220px;
            }
            #small-box{
                /*  330px; */
                position: relative;
                z-index: 1;
            }
            #float-box{
                display: none;
                position: absolute;
                background-color: #ffffcc;
                width: 200px;
                height: 125px;
                opacity: 0.5;
                cursor: move;
                border: 1px solid #ccc;
            }
            #big-box{
                display: none;
                position: absolute;
                top: 0;
                left: 400px;;
                width: 400px;
                height: 300px;
                overflow: hidden;
                border: 1px solid #ccc;
                z-index: 1;
            }
            #big-box img{
                width: 600px;
                height: 400px;
                position: absolute;
                z-index: 5;
            }
            #mark{
                position: absolute;
                display: block;
                width: 330px;
                height: 220px;
                background-color: #fff;
                opacity: 0;
                z-index: 10;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="small-box">
                <div id="mark"></div>
                <div id="float-box"></div>
                <img src="img1.jpg" alt="小图">
            </div>
            <div id="big-box">
                <img src="img1.jpg" alt="大图">
            </div>
        </div>
    </body>
    </html>

    JS代码:

    window.onload = function(){
        var demo = document.getElementById("demo");
        var small_box = document.getElementById("small-box");
        var big_box = document.getElementById("big-box");
        var mark = document.getElementById("mark");
        var float_box = document.getElementById("float-box");
        var bigImg = big_box.getElementsByTagName("img")[0];
        console.log(bigImg);
        small_box.onmouseover = function(){
            big_box.style.display = "block";
            float_box.style.display = "block";
        }
        
        small_box.onmouseleave = function(){
            big_box.style.display = "none";
            float_box.style.display = "none";
        }
    
        small_box.onmousemove = function(ev){
            var _event  = ev || window.event;//兼容不同浏览器获取事件对象的方式
            var left = _event.clientX - demo.offsetLeft - small_box.offsetLeft - (float_box.offsetWidth)/2;
            console.log(left);
            var top = _event.clientY - demo.offsetTop - small_box.offsetTop - (float_box.offsetTop)/2;
            if(left < 0){
                left = 0;
            }else if(left > (mark.offsetWidth - float_box.offsetWidth)){
                left = (mark.offsetWidth - float_box.offsetWidth);
                console.log("max");
            };
            if(top < 0){
                top = 0;
            }else if(top > (mark.offsetHeight - float_box.offsetHeight)){
                top = mark.offsetHeight - float_box.offsetHeight;
                console.log("maxerr");
            };
            //开始设置float_box的位置变化
            float_box.style.left = left + "px";
            float_box.style.top = top + "px";
    
            var percentX = left / (mark.offsetWidth - float_box.offsetWidth);
            var percentY = top / (mark.offsetHeight - float_box.offsetHeight);
            bigImg.style.left = - percentX *(bigImg.offsetWidth - big_box.offsetWidth) + "px" ;
            bigImg.style.top = - percentY *(bigImg.offsetHeight - big_box.offsetHeight) + "px";
    
        }
    }

    注意一个要点:

    浮动框的宽/小盒子的宽 = 大盒子的宽/图片的宽

  • 相关阅读:
    在项目开始前,为客户做专门的“需求变更流程”培训是必要的
    代码优化四部曲:“拆套”、“解耦”、”封装“、“重构”
    这个博客的目的就是解构程序猿的世界观
    如果3D技术仅仅只是用于游戏和娱乐,那真是太暴殄天物了
    如何用Xcode 4.5开发3.5寸屏幕的iPhone 应用程序?
    所谓开发经验,其实就是对业务流程的积累
    项目经理必备的两大能力
    XML文件总是无法读取其中的数据
    在switch的case语句后,使用UIAlertView报错
    代码编写原则
  • 原文地址:https://www.cnblogs.com/linbudu/p/10625302.html
Copyright © 2011-2022 走看看