欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js放大镜的功能实现

程序员文章站 2024-03-17 11:07:04
...

思路：
我们需要实现的是当鼠标移入图片时，半透明遮罩的框需要跟着鼠标的移动而移动，在此所以滑动到的区域需要放大并展示在另外一个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';
        };
}
相关标签： 简单的小实例 html css js

上一篇： 蓝桥杯-阶乘计算

下一篇： 前端CSS基础知识

推荐阅读