放大镜效果的制作

最新推荐文章于 2024-04-10 23:28:35 发布
喜东东啊
最新推荐文章于 2024-04-10 23:28:35 发布
阅读量228
点赞数 1
本文链接：https://blog.csdn.net/weixin_41016545/article/details/78617062
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>淘宝放大镜制作</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #demo{
                width: 400px;
                height: 255px;
                margin: 50px;
                position: relative;
                border: 1px solid red;
                display: block;
            }
            /*宽高没有设置 默认和其父盒子的宽高保持一致*/
            #small-box{
                position: relative;
                z-index: 1;
            }
            #float-box{
                display: none;
                width: 160px;
                height: 120px;
                position: absolute;
                background: gray;
                border: 1px solid gray;
                opacity: 0.5;
            }
            #big-box{
                display: none;
                /*相对于demo盒子来进行的定位*/
                position: absolute;
                top: 0;
                /*距离左边的距离是小盒子的宽度加上两者之间的距离*/
                left: 460px;
                width: 400px;
                height: 300px;
                overflow: hidden;
                border: 1px solid red;
                z-index: 1;
            }
            /*大图必须设置定位 向上找 知道找到一个设置定位的父亲为止 无论是什么定位都可以*/
            #big-box img{
                position: absolute;
                z-index: 1;
            }

            #mask{
                position: absolute;
                display: block;
                width: 400px;
                height: 255px;
                background-color:white ;
                opacity: 0;
                z-index: 10;

            }
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="small-box">
                <!--设置代替层-->
                <div id="mask"></div>
                <div id="float-box"></div>
                <img src="macbook-small.jpg" />
            </div>
            <div id="big-box">
                <img src="macbook-big.jpg" />
            </div>
        </div>
    </body>
</html>
<script>
    window.onload=function(){
        //获取最父级盒子
        var objDemoBox=document.getElementById('demo');
        //获取小图片盒子
        var objSmallBox=document.getElementById('small-box');
        //获取鼠标可以移动的的盒子
        var objFloatBox=document.getElementById('float-box');
        //获取大图片盒子
        var objBigBox=document.getElementById('big-box');
        //获取大图片
        var objBigBoxImg=objBigBox.getElementsByTagName('img')[0];
        //获取鼠标真正拖动的对象
        var objMarkBox=document.getElementById('mask');


        //设置鼠标悬停后的样式
        objMarkBox.onmouseover=function(){
            objFloatBox.style.display='block';
            objBigBox.style.display='block';
        }
        //设置鼠标移开后的样式显示效果
        objMarkBox.onmouseout=function(){
            objFloatBox.style.display='none';
            objBigBox.style.display='none';
        }
        //获取鼠标移动时的事件 主要是通过鼠标事件来获取鼠标的坐标
        objMarkBox.onmousemove=function(ev){
            var _event=ev ||window.event;
            var left=_event.clientX-objDemoBox.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
            var top=_event.clientY-objDemoBox.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;;
            //限制盒子的移动区域不能超过小盒子
            if(left<0){
                left=0;
            }else 
            if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth){
                left=objSmallBox.offsetWidth-objFloatBox.offsetWidth
            }
            if(top<0){
                top=0;
            }else 
            if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight){
                top=objSmallBox.offsetHeight-objFloatBox.offsetHeight
            }

            //使其随着鼠标移动而移动 改变坐标
            objFloatBox.style.left=left+'px';
            objFloatBox.style.top=top+'px';


            //下面是计算大图片的应该移动的距离 万能公式
            var ppx=left/(objSmallBox.offsetWidth-objFloatBox.offsetWidth);
            var ppy=top/(objSmallBox.offsetHeight-objFloatBox.offsetHeight);
            //使得图片的位置发生改变
            objBigBoxImg.style.left=-ppx*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+'px';
            objBigBoxImg.style.top=-ppy*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+'px';

        }

    }
</script>