zoukankan      html  css  js  c++  java
  • 放大镜功能 JS原生写法

    ********** 希望对大家帮助 我会继续努力的 如果有不对的地方请大家帮忙指出******

    1 【JS 代码】

    <script>

        var oBox = document.getElementById("box");
    var bigBox = document.getElementById("bigBox");
    var img = bigBox.getElementsByTagName("img")[0];
    var mark;
    // 分别给元素的鼠标进入,滑动,滑出绑定方法;
    // 1. 鼠标滑入; 1) :创建出小盒子 2) : bigBox 显示;
    oBox.onmouseenter = function () {
    var smallBox = document.createElement("div");
    smallBox.id = "mark";
    this.appendChild(smallBox); // 需要放入DOM中,才能用document去获取元素;否则当前节点是获取不到的;
    mark = document.getElementById("mark");
    // 让大盒子显示
    bigBox.style.display = "block";
    }
    oBox.onmousemove = function (e) {
    // 计算小盒子的位置;大盒子图片的位置
    e = e || window.event;
    var minL = 0;
    var maxL = box.offsetWidth/2;
    var left = e.clientX - box.offsetLeft - mark.offsetWidth/2;
    var top = e.clientY- box.offsetTop - mark.offsetHeight/2;
    // 如果left比最小值还小,那么直接让left等于最小值即可;如果left比最大值还大,那么直接设置成最大值;
    if(left<minL){
    left = minL;
    }else if(left>maxL){
    left=maxL;
    }
    if(top<minL){
    top = minL;
    }else if(top>maxL){
    top = maxL;
    }
    // 设置盒子的left、top;
    mark.style.left = left + "px";
    mark.style.top = top + "px";
    // mark 的left和img的left存在2倍关系;
    img.style.left = -2*left + "px";
    img.style.top = -2*top + "px";
    }
    oBox.onmouseleave = function () {
    // 鼠标离开,移出mark;并且让大盒子隐藏;
    this.removeChild(mark);
    bigBox.style.display= "none";
    }


    </script>

    2 【HTNL部分】
    <div id="box">
    <img src="img/iphone.jpg" alt="">
    </div>
    <div id="bigBox">
    <img src="img/iphone_big.jpg" alt="">
    </div>
    3【CSS部分】
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    #box{
    position: relative;
    350px;
    height:350px;
    border: 1px solid black;
    margin-top:30px;
    margin-left:50px;
    float:left;
    }
    #box img{
    100%;
    height:100%;
    }
    #bigBox{
    display: none;
    position: relative;
    350px;
    height:350px;
    border: 1px solid black;
    margin-top:30px;
    margin-left:50px;
    float: left;
    overflow: hidden;
    }
    #bigBox img{
    position: absolute;
    700px;
    height:700px;
    }
    #mark{
    position: absolute;
    175px;
    height:175px;
    background: rgba(0,0,0,0.3);
    cursor: move;
    left:0;
    top:0;
    }
    </style>



  • 相关阅读:
    linux环境下时区无法设置(UTC无法更改为CST)的问题解决
    SUSE12 网卡配置、SSH远程配置、解决CRT密钥交换失败,没有兼容的加密程序
    SUSE12 操作系统安装
    Unity技术支持团队性能优化经验分享
    基于unity3d游戏的android版本逆向初探
    Unity手游引擎安全解析及实践
    盛大游戏技术总监徐峥:Unity引擎使用的三种方式
    基于Unity 5的次世代卡通渲染技术 -- Unite 2017 米哈游总监贺甲分享实录
    欢乐互娱庞池海:《龙之谷》项目性能优化经验分享
    ue4 htcvivi简单配置
  • 原文地址:https://www.cnblogs.com/supershare/p/12200912.html
Copyright © 2011-2022 走看看