js案例之放大镜

最新推荐文章于 2022-09-22 20:00:08 发布

lucky芬

最新推荐文章于 2022-09-22 20:00:08 发布

阅读量314

点赞数

分类专栏： JavaScript 练手小案例

练手小案例同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

JavaScript

11 篇文章 2 订阅

订阅专栏

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,div,img{
            margin:0;
            padding:0;
        }
        img{
            display:block;
            border:none;
        }
        #box{
            position:absolute;
            top:20px;
            left:20px;
            width:350px;
            height:350px;
            box-shadow:3px 3px 10px 0 #111111;

        }
        #box img{
            width:100%;
            height:100%;

        }
        #mark{
            display:none;
            position:absolute;
            top:0;
            left:0;
            width:175px;
            height:175px;
            background:#000;
            opacity: 0.5;
            filter:alpha(opacity=50);
            cursor:move;

        }
        #boxRight{
            display:none;
            position:absolute;
            top:20px;
            left:380px;
            width:350px;
            height:350px;
            overflow:hidden;
        }
        /*我们右侧的图片的大小是需要严格计算的:
            mark的width是box的width的一半，那么我们的大图宽度也应该是小图的二倍
        */
        #boxRight img{
            position:absolute;
            top:0;
            left:0;
            width:200%;
            height:200%;
        }
    </style>
</head>
<body>
    <div id='box'>
        <img src="img/2.jpg" alt="">
        <div id='mark'></div>
    </div>
    <div id='boxRight'>
        <img src="img/2_big.jpg" alt="">
    </div>
    <script>
        //放大镜的原理: 我们的mark横向是box的一半，纵向也是box的一半，那么右侧的大图横向（纵向）应该是左侧小图的2倍
        var box = document.getElementById('box');
        var mark = document.getElementById('mark');
        var boxRight = document.getElementById('boxRight');
        //设置mark这个盒子
        function setPosition(e){
            var top = e.clientY - box.offsetTop - (mark.offsetHeight/2);
            var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2);
            //边界判断 
            var tempL = 0,tempT = 0;
            var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight ;

            if(left<minL){
                mark.style.left = minL + "px";
                tempL = minL;
            }else if(left>maxL){
                mark.style.left = maxL + "px";
                tempL = maxL;
            }else{
                mark.style.left = left + "px";
                tempL = left;
            }
            if(top<minT){
                mark.style.top = minT + "px";
                tempT = minT;
            }else if(top>maxT){
                mark.style.top = maxT + "px";
                tempT = maxT;
            }else{
                mark.style.top = top + "px";
                tempT = top;
            }
            //右侧图片跟着运动:左侧移动多少，右侧跟着移动他的2倍即可
            var oImg = boxRight.getElementsByTagName("img")[0];
            oImg.style.left = -tempL*2 + "px";
            oImg.style.top = -tempT*2 + "px";

        }
        box.onmouseenter = function(e){
            e = e || window.event;
            
            mark.style.display = "block";
            setPosition(e);
            boxRight.style.display = "block";

        }
        box.onmousemove = function(e){
            e = e || window.event;
            setPosition(e);

        }
        box.onmouseleave = function(e){
            e = e || window.event;
            mark.style.display = "none";
            boxRight.style.display = "none";
            
        }
    </script>
</body>
</html>

案例二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #photo{
            width: 400px;
            height: 225px;
            background: url("img/2.jpg") no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        #drag{
            width: 80px;
            height: 45px;
            background: white;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        #show{
            margin-top: 20px;
            width: 400px;
            height: 225px;
            overflow: hidden;
            display: none;
        }
        #big{
            width: 2000px;
            height: 1125px;
            background: url("img/2_big.jpg") no-repeat;
            background-size: 100%;
        }
    </style>
</head>
<body>
<div id="photo">
    <div id="drag">
    </div>
</div>
<div id="show">
    <div id="big">
    </div>
</div>
<script type="text/javascript">
    var photo=document.getElementById("photo");
    var drag=document.getElementById("drag");
    var show=document.getElementById("show");
    var big=document.getElementById("big");
    window.οnmοusemοve=function(event){
        //兼容性处理
        var e=event||window.event;
        //为了使鼠标处于透明框的中心部位，需要用鼠标位置减去透明框宽度和高度的一半
        //x,y分别为经过处理后的鼠标横纵坐标
        var x= e.clientX-drag.offsetWidth/2;
        var y= e.clientY-drag.offsetHeight/2;
        //maxL,maxT分别为最大横向和最大纵向移动距离
        var maxL=photo.offsetWidth-drag.offsetWidth;
        var maxT=photo.offsetHeight-drag.offsetHeight;
        //如果横向坐标超过最大距离，使横向坐标等于最大距离
        if(x>=maxL){
            x=maxL;
        }
        //如果横向坐标小于最大距离，使横向坐标等于0
        if(x<=0){
            x=0;
        }
        //如果纵向坐标超过最大距离，使纵向坐标等于最大距离
        if(y>=maxT){
            y=maxT;
        }
        //如果纵向坐标小于0，使纵向坐标等0
        if(y<=0){
            y=0;
        }
        //控制透明框的位置
        drag.style.left=x+"px";
        drag.style.top=y+"px";
        //控制展示框显示的位置
        show.scrollLeft=5*x;
        show.scrollTop=5*y;
    }
    //图片的鼠标移入事件
    photo.οnmοuseοver=function(){
        //透明框和展示框出现
        show.style.display="block";
        drag.style.display="block";
    }
    //图片的鼠标移出事件
    photo.οnmοuseοut=function(){
        //透明框和展示框隐藏
        show.style.display="none";
        drag.style.display="none";
    }
</script>
</body>
</html>