JavaScript 鼠标放大镜左侧商品

🌙
手机阅读
本文目录结构

1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{width: 400px;height: 400px;background: orange;}
        #newDiv{width: 100px;height: 100px;background: red;position: absolute;color: black;}
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onmouseenter=function(event) {
        var event=event||window.event;
        var newDiv=document.createElement("div");
        newDiv.id="newDiv";
        this.appendChild(newDiv);//this添加,而不是document.body;
        /*下面是offsetWidth只能算文档树里的,所以需要先把创建的newDiv添加到文档树里面*/
        newDiv.style.left=event.clientX-newDiv.offsetWidth/2+"px";
        newDiv.style.top=event.clientY-newDiv.offsetHeight/2+"px";
    };
    oDiv.onmousemove=function(event) {
        event=event||window.event;
        var newDiv=document.getElementById("newDiv");
        if(newDiv){
            newDiv.style.left=event.clientX-newDiv.offsetWidth/2+"px";
            newDiv.style.top=event.clientY-newDiv.offsetHeight/2+"px";
        }

    };
    oDiv.onmouseleave= function (event) {
        var newDiv=document.getElementById("newDiv");
        if(newDiv){
            newDiv.parentNode.removeChild(newDiv);
        }
    };


    function setMark(newDiv, event) {
        event = event || window.event;
        //上面是绑定事件的标配;
        //获取mark这个div的宽度和高度;并且让mark这个DIV显示在鼠标出现位置的正中间;
        newDiv.style.left =event.clientX-newDiv.offsetWidth/2+"px";
        newDiv.style.top =event.clientY-newDiv.offsetHeight/2+"px";
        //下面是判断边界,当鼠标移到左边界和右边界的判断;
        if (l < 0) {
            newDiv.style.left = 0 + "px";
        } else if (l > (tabW - markW)) {
            newDiv.style.left = tabW - markW + "px";
        }
        //当鼠标移到上边界和下边界的判断;
        if (t < 0) {
            newDiv.style.top = 0 + "px";
        } else if (t > (tabH - markH)) {
            newDiv.style.top = tabH - markH + "px";
        }
    };












</script>

2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{margin: 0;padding: 0;}
        #div1{width: 400px;height: 400px;background: orange;margin: 50px auto;}
        #newDiv{width: 100px;height: 100px;background: red;position: absolute;color: black;  left: 0;top: 0;cursor: move;}
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script src=""></script>
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onmouseenter=function(event) {
        var newDiv=document.createElement("div");
        newDiv.id="newDiv";
        this.appendChild(newDiv);//this添加,而不是document.body;
        setMark(newDiv,event);
    };
    oDiv.onmousemove=function(event) {
        var newDiv=document.getElementById("newDiv");
        if(newDiv){
            setMark(newDiv,event);
        }

    };
    oDiv.onmouseleave= function () {
        var newDiv=document.getElementById("newDiv");
            newDiv.parentNode.removeChild(newDiv);
    };


    function setMark(newDiv, event) {
        event = event || window.event;
        //上面是绑定事件的标配;
        //获取这个div的宽度和高度;并且让这个DIV显示在鼠标出现位置的正中间;
        newDiv.style.left =event.clientX-newDiv.offsetWidth/2+"px";
        newDiv.style.top =event.clientY-newDiv.offsetHeight/2+"px";
        //下面是判断边界,当鼠标移到左边界和右边界的判断;
        var l= event.clientX-newDiv.offsetWidth/2-oDiv.offsetLeft;
        var t= event.clientY-newDiv.offsetHeight/2-oDiv.offsetTop;
        if (l <= 0) {
            newDiv.style.left = oDiv.offsetLeft + "px";
        } else if (l > (oDiv.offsetWidth - newDiv.offsetWidth)) {
            newDiv.style.left = oDiv.offsetLeft + oDiv.offsetWidth-newDiv.offsetWidth + "px";
        }
        //当鼠标移到上边界和下边界的判断;
        if (t < 0) {
            newDiv.style.top = oDiv.offsetTop  + "px";
        } else if (t > (oDiv.offsetHeight - newDiv.offsetHeight)) {
            newDiv.style.top = oDiv.offsetTop + oDiv.offsetHeight-newDiv.offsetHeight + "px";
        }
    };












</script>

3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{margin: 0;padding: 0;}
        #div1{width: 300px;height: 300px;background: orange;margin: 100px 0 0 100px;}
        #newDiv{width: 100px;height: 100px;background: red;position: absolute;color: black;  left: 0;top: 0;cursor: move;}
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script src=""></script>
<script>
    var oDiv=document.getElementById("div1");
    var oDivL=oDiv.offsetLeft;
    var oDivT=oDiv.offsetTop;
    var oDivH=oDiv.offsetHeight;
    var oDivW=oDiv.offsetWidth;
    oDiv.onmouseenter=function(event) {
        var newDiv=document.createElement("div");
        newDiv.id="newDiv";
        this.appendChild(newDiv);//this添加,而不是document.body;
        setMark(newDiv,event);
    };
    oDiv.onmousemove=function(event) {
        var newDiv=document.getElementById("newDiv");
        if(newDiv){
            setMark(newDiv,event);
        }
    };
    oDiv.onmouseleave= function () {
        var newDiv=document.getElementById("newDiv");
            newDiv.parentNode.removeChild(newDiv);
    };

    function setMark(newDiv, event) {
        event = event || window.event;
        var newW=newDiv.offsetWidth;
        var newH=newDiv.offsetHeight;
        newDiv.style.left =event.clientX-newW/2+"px";
        newDiv.style.top =event.clientY-newH/2+"px";
        //下面是判断边界,当鼠标移到左边界和右边界的判断;
        var l= event.clientX-newW/2-oDivL;
        var t= event.clientY-newH/2-oDivT;
        if (l <= 0) {
            newDiv.style.left = oDivL + "px";
        } else if (l > (oDivW - newW)) {
            newDiv.style.left = oDivL + oDivW -newW + "px";
        }
        //当鼠标移到上边界和下边界的判断;
        if (t < 0) {
            newDiv.style.top = oDivT  + "px";
        } else if (t > (oDivH - newH)) {
            newDiv.style.top = oDivT + oDivH-newH + "px";
        }
    };




</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>