js放大镜的功能实现

最新推荐文章于 2024-07-23 21:29:19 发布

丑小姐

最新推荐文章于 2024-07-23 21:29:19 发布

阅读量74

点赞数

分类专栏：简单的小实例文章标签： html css js

本文链接：https://blog.csdn.net/weixin_42451032/article/details/116460558

版权

简单的小实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

思路：
我们需要实现的是当鼠标移入图片时，半透明遮罩的框需要跟着鼠标的移动而移动，在此所以滑动到的区域需要放大并展示在另外一个div里面
问题：
1.当鼠标移入图片里面时，半透明遮罩的框就会跟着鼠标的移动而移动
2.如何实现滑动到的区域放大并展示到另外一个div中

html

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css"  href="./index.css"/>
    <script src="./common.js"></script>
</head>
<body>
    <div id="box">
        <!--左侧-->
        <div class="small_pic" id="small_pic">
            <!--滑块-->
            <span class="slider" id="slider"></span>
            <!--图片-->
            <img src="./images/bg.jpg" />
        </div>
        <!--右侧-->
        <div class="big_pic" id="big_pic">
            <!--图片-->
            <img class="big_img" id="big_img" src="./images//bg.jpg" width="720" height="1000"/>
        </div>
    </div>
</body>

</html>

css

#box {
    position: relative;
}
.small_pic {
    width:360px;
    height:500px;
    border:1px solid #ccc;
}
    .small_pic img {
        width:100%;
        height:100%;
    }
    .small_pic .slider {
        width:180px;
        height:250px;
        position: absolute;
        background:rgba(56, 55, 55, 0.3);
        cursor:move;
        display:none;
    }
.big_pic {
    width:360px;
    height:500px;
    position: absolute;
    top:0;
    left:370px;
    border:1px solid #333;
    overflow: hidden;
    display:none;
    border:1px solid #ccc;
}
    .big_pic .big_img {
        position: absolute;
        
    }

js

var web = {
    $:function (id){
        return document.getElementById(id);
    }
}

window.onload = function () {
    var slider = web.$('slider'),
        big_pic = web.$('big_pic'),
        small_pic = web.$('small_pic'),
        big_img = web.$('big_img');

        small_pic.onmousemove = function (event){
            slider.style.display = "block";
            big_pic.style.display = "block";
            // 当鼠标左右滑动时，slider也跟着滑动
            var left = event.clientX - slider.offsetWidth/2,
                top = event.clientY - slider.offsetHeight/2,
                w = this.offsetWidth - slider.offsetWidth,
                h = this.offsetHeight - slider.offsetHeight,
                // 计算据遮罩层移动的距离计算比例
                x = (this.offsetWidth-big_img.offsetWidth)/w,
                y = (this.offsetHeight-big_img.offsetHeight)/h;

 // 当我们滑动出了small_pic这个框的时候，slider并没有隐藏
            if(left <0) {
                left = 0;
            }else if(left > w) {
                left = w;
            };
            if(top <0) {
                top = 0;
            }else if(top > h) {
                top = h;
            };
            slider.style.left = left + 'px';
            slider.style.top = top + 'px';
            // 解决移入big_pic放大显示的问题
            big_img.style.left =(left*x) + 'px';
            big_img.style.top = (top*y) + 'px';

        }
        small_pic.onmouseout= function(){
            slider.style.display = 'none';
            big_pic.style.display = 'none';
        };
}

丑小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js放大镜的功能实现

思路：我们需要实现的是当鼠标移入图片时，半透明遮罩的框需要跟着鼠标的移动而移动，在此所以滑动到的区域需要放大并展示在另外一个div里面问题：1.当鼠标移入图片里面时，半透明遮罩的框就会跟着鼠标的移动而移动2.如何实现滑动到的区域放大并展示到另外一个div中html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X
复制链接

扫一扫

专栏目录