Javascript制作放大镜

最新推荐文章于 2024-08-15 08:55:57 发布

weixin_30856725

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量67

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/DCL1314/p/7602660.html

版权

方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 250px;
        }
        .box0{
            position: absolute;
            width: 100px;
            height: 100px;
            background:rgba(255,255,0,.4);
        }
        img{
            width: 400px;
            height: 250px;
        }
        .box1{
            position: absolute;
            left: 450px;
            top:10px;
            width: 200px;
            height:200px;
            overflow: hidden;
        }
        .box1 img{
            width: 800px;
            height: 500px;
            position: absolute;
        }
    </style>
</head>
<body>

    <div class="box" id="box">
    <!--遮罩-->
        <div class="box0" id="box0" style="display:none"></div> 
        <img src="./images/0.jpg" alt="">
    </div><!--左边盒子-->
    <div class="box1">
        <img src="./images/0.jpg" alt="" id="rightImg" style="display:none">
    </div><!--右边盒子-->
    
</body>
</html>
<script>
    var box =document.getElementById("box");
    var box0=document.getElementById("box0");
    var rightImg=document.querySelector("#rightImg")
    box.onmouseover=function(){
        box0.style.display="block";
        rightImg.style.display="block";

        //鼠标移动  
        box.onmousemove=function(ev){
            var e = ev||window.event;
            box0.style.left=(e.clientX-50)+"px";
            box0.style.top=(e.clientY-50)+"px";
            if(box0.offsetLeft<0){
                box0.style.left=0+"px";
            }
            if(box0.offsetLeft>300){
                box0.style.left=300+"px";
            }
            if(box0.offsetTop<0){
                box0.style.top=0+"px";
            }
            if(box0.offsetTop>150){
                box0.style.top=150+"px";
        }
        rightImg.style.left=(-2*(parseInt(box0.style.left)))+"px";
        rightImg.style.top=(-2*(parseInt(box0.style.top)))+"px";
    }
    box0.onmouseout=function(){
        box0.style.display="none";
        rightImg.style.display="none";  
    }
}
</script>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        #zoom{
            position: relative;
            width:480px;
            height:270px;
            border:1px solid #ccc;
            cursor:crosshair;
        }

        #zoomJing{
            position: absolute;
            display:none;
            width:100px;
            height:100px;
            left:0;
            top:0;
            background-color:orange;
            opacity:.5;
            filter:alpha(opacity=50);
        }

        #bigZoom{
            position: absolute;
            width:400px;
            height:400px;
            overflow:hidden;
            display:none;
        }
    </style>
</head>
<body>
    <div id="zoom">
        <img src="./images/Meinv014.jpg" alt="" width="480" height="270">

        <div id="zoomJing"></div>
    </div>

    <div id="bigZoom">
        <img src="./images/Meinv014.jpg" alt="">
    </div>


    <script>
        var zoom = document.getElementById("zoom");
        var bigZoom = document.getElementById("bigZoom");
        var zoomJing = document.getElementById("zoomJing");



        //绑定事件 鼠标
        zoom.onmouseover = function(){

            //显示bigZoom
            bigZoom.style.display = "block";
            zoomJing.style.display = "block";
        
            //确定bigZoom的位置
            bigZoom.style.left = zoom.getBoundingClientRect().right + 10 + "px";
            bigZoom.style.top = zoom.getBoundingClientRect().top + "px";

            // 鼠标移动事件
            this.onmousemove = function(ev){
                //计算 鼠标在zoom上的坐标
                var e = ev || window.event;
                var x = e.clientX - this.getBoundingClientRect().left;
                var y = e.clientY - this.getBoundingClientRect().top;

                //计算zoomJing的位置
                var zX = Math.min(Math.max(x - 50, 0), 380);
                var zY = Math.min(Math.max(y - 50, 0), 170);

                //确定zoomJing的位置
                zoomJing.style.left = zX + "px";
                zoomJing.style.top = zY + "px";

                //改变放大图
                bigZoom.scrollLeft = zX * 4;
                bigZoom.scrollTop = zY * 4;

            }
        }
        zoom.onmouseout = function(){
            zoomJing.style.display = "none";
            bigZoom.style.display = "none";
        }

    </script>
</body>
</html>

转载于:https://www.cnblogs.com/DCL1314/p/7602660.html

weixin_30856725

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript制作放大镜

方法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; p...
复制链接

扫一扫