JavaScript放大镜详解

WEB前端 waitig 357℃ 百度已收录 0评论

1.物体随着鼠标移动


<!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>
        //offsetLeft 子元素想当父元素的左位移 
        // offsetTop 子元素想当父元素的上位移
        // offsetWidth 盒子本身的宽高 不包括滚动条
        // event.clientX 鼠标的X,Y轴相对与整个页面,而非子元素


        window.onload = function () {
            var box = document.getElementById("box");
            var nav = document.getElementById("nav");


            box.onmousemove = function (e) {
                //兼容ie浏览器  
                var e = e || window.event
                var left = e.clientX – this.offsetLeft – nav.offsetWidth / 2
                var top = e.clientY – this.offsetTop – nav.offsetHeight / 2


                 //控制拖拽物体的范围只能在规定的范围内拖拽,预防出现滚动条
                if (left < 0) {
                    left = 0
                } else if (left >= box.offsetWidth – nav.offsetWidth) {
                    left = box.offsetWidth – nav.offsetWidth
                }


                if (top < 0) {
                    top = 0
                } else if (top >= box.offsetHeight – nav.offsetHeight) {
                    top = box.offsetHeight – nav.offsetHeight
                }


                nav.style.left = left + ‘px’;
                nav.style.top = top + ‘px’
            }
        }
    </script>
    <style> 
        *{
            margin: 0;
            padding: 0;
        }


        #box{
            width: 600px;
            height: 400px;
            border: 1px solid #aaaaaa;
            margin: 20px;
            position: relative;
            
        }
        
        #nav{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 20px;
            left: 20px;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="nav"></div>
    </div>
</body>
</html>

2.鼠标拖拽 
<!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>
        //offsetLeft 子元素想当父元素的左位移 
        // offsetTop 子元素想当父元素的上位移
        // offsetWidth 盒子本身的宽高 不包括滚动条
        // event.clientX 鼠标的X,Y轴相对与整个页面,而非子元素


        window.onload = function () {
            var box = document.getElementById("box");
            var nav = document.getElementById("nav");


            nav.onmousedown = function (e) {
                //兼容ie浏览器  
                var e = e || window.event


                var left = e.clientX – this.offsetLeft;
                var top = e.clientY – this.offsetTop;


                document.onmousemove = function () {
                    var e = e || window.event
                    var lefttwo = e.clientX – left
                    var toptwo = e.clientY – top


                    //控制拖拽物体的范围只能在规定的范围内拖拽,预防出现滚动条
                    if (lefttwo < 0) {
                        lefttwo = 0
                    } else if (lefttwo >= box.offsetWidth – nav.offsetWidth) {
                        lefttwo = box.offsetWidth – nav.offsetWidth
                    }


                    if (toptwo < 0) {
                        toptwo = 0
                    } else if (toptwo >= box.offsetHeight – nav.offsetHeight) {
                        toptwo = box.offsetHeight – nav.offsetHeight
                    }


                    //移动时重新得到改物体的具体位置
                    nav.style.left = lefttwo + "px";
                    nav.style.top = toptwo + "px";
                }
                document.onmouseup = function () {
                    this.onmousemove = null
                    this.onmouseup = null
                }
            }
        }
    </script>
    <style> 
        *{
            margin: 0;
            padding: 0;
        }


        #box{
            width: 600px;
            height: 400px;
            border: 1px solid #aaaaaa;
            margin: 20px;
            position: relative;
        }
        
        #nav{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 20px;
            left: 20px;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="nav"></div>
    </div>
</body>
</html>

3.JavaScript实现放大镜Dome效果 

<!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>
        //offsetLeft 子元素想当父元素的左位移 
        // offsetTop 子元素想当父元素的上位移
        // offsetWidth 盒子本身的宽高 不包括滚动条
        // event.clientX 鼠标的X,Y轴相对与整个页面,而非子元素


        window.onload=function(){
            var box=document.getElementById("box");
            var big=document.getElementById("big");
            var inner=box.getElementsByTagName("div")[0];
            var Oimg=big.getElementsByTagName("img")[0];


            //鼠标移入的时候显示
            box.onmouseover=function(){
                big.style.display=’block’;
                inner.style.display=’block’;
            }


            //鼠标移动时
            box.onmousemove=function(e){
                 e = e||window.event;
                 var left=e.clientX-this.offsetLeft-inner.offsetWidth/2
                 var top=e.clientY-this.offsetTop-inner.offsetHeight/2




                //控制拖拽物体的范围只能在规定的范围内拖拽,预防出现滚动条
                if(left<=0){
                    left=0
                }else if(left>=this.offsetWidth-inner.offsetWidth){
                    left=this.offsetWidth-inner.offsetWidth
                }


                if(top<=0){
                    top=0
                }else if(top>=this.offsetHeight-inner.offsetHeight){
                    top=this.offsetHeight-inner.offsetHeight
                }


                 //移动时重新得到改物体的具体位置
                inner.style.left=left+"px";
                inner.style.top=top+"px"


                //移动时图片的大小发生改变
                Oimg.style.left=left/(box.offsetWidth-inner.offsetWidth)*(big.offsetWidth-Oimg.offsetWidth)+’px’;
                Oimg.style.top=top/(box.offsetHeight-inner.offsetHeight)*(big.offsetHeight-Oimg.offsetHeight)+’px’;


            }
            box.onmouseout=function(){
                big.style.display=’none’;
                inner.style.display=’none’;
            }
        }
    </script>


    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid #aaa;
            position: relative;
            
        }
        .inner{
            width: 150px;
            height: 150px;
            background: rgb(228, 218, 218);
            border: 1px solid rgba(0, 0, 0, 0.315);
            opacity: 0.3;
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }
        .big{
            width: 500px;
            height: 500px;
            border: 1px solid #aaa;
            position: absolute;
            left: 450px;
            top: 0;
            overflow:hidden;
            display: none;
            
        }


        .big img{
            position: absolute;
            width: 230%;
            height: 230%;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
        <img src="http://img3.imgtn.bdimg.com/it/u=367891043,8441890&fm=11&gp=0.jpg"
width="100%" height="100%" alt="图片">

        <div class="inner"></div>
    </div>
    <div id="big" class="big">
        <img src="http://img3.imgtn.bdimg.com/it/u=367891043,8441890&fm=11&gp=0.jpg"
 alt="放大镜">

    </div>
</body>

</html>

更多资料进群领取  WEB前端学习交流群21 598399936 
 


本文由【waitig】发表在等英博客
本文固定链接:JavaScript放大镜详解
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)