js学习笔记（放大镜特效）

最新推荐文章于 2024-06-19 16:19:47 发布

甜甜今天学了吗

最新推荐文章于 2024-06-19 16:19:47 发布

阅读量131

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/dawanhjiao/article/details/105366569

版权

案例：放大镜特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 350px;
            height: 350px;
            background-color: red;
            margin: 100px 0 0 100px;
        }
        #small{
            position: relative;
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        #small img{
            width: 100%;
            height: 100%;
        }
        #mask{
            width: 100px;
            height: 100px;
            background-color: rgba(255,255,50,0.4);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;/*鼠标样式，移动样式*/
            display: none;
        }
        #big{
            width: 550px;
            height: 550px;
            border: 1px solid #CCCCCC;
            position: absolute;
            left: 480px;
            top: 100px;
            display: none;
            overflow: hidden;
        }
        #big img{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        #list{
            margin-left: 20px;
        }
        ul li{
            float: left;
            margin: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="small">
        <img src="image/pic001.jpg">
        <span id="mask"></span><!--显微镜-->
    </div>
    <div id="big">
        <img src="image/pic01.jpg">
    </div>
    <div id="list">
        <ul>
            <li><img src="image/pic0001.jpg"></li>
            <li><img src="image/pic0002.jpg"></li>
            <li><img src="image/pic0003.jpg"></li>
        </ul>
    </div>
</div>
<script src="工具/Tool.js"></script>
<script>
    window.onload = function (ev) {
        var box = Tool.$('box');
        var small = Tool.$('small');
        var big = Tool.$('big');
        var mask = Tool.$('mask');
        var bimg = big.children[0];
        var allli = Tool.$('list').getElementsByTagName('li');
        //鼠标进入小盒子
        small.onmouseover = function (ev1) {
            mask.style.display = 'block';
            big.style.display = 'block';
            //鼠标移动
            small.onmousemove = function (ev11) {
                var e = ev11 || window.event;
                var x = e.pageX - box.offsetLeft - mask.offsetWidth / 2;//因为可能有大于网页的内容，所以用page更可靠
                var y = e.pageY - box.offsetTop - mask.offsetHeight / 2;//减掉mask自身是因为要让鼠标处于中心
                //边界检测
                if (x < 0){
                    x = 0;
                }
                else if (x > box.offsetWidth - mask.offsetWidth - 2){
                    x = box.offsetWidth - mask.offsetWidth - 2;//减2是减去边框
                }
                if (y < 0){
                    y = 0;
                }
                else if (y > box.offsetHeight - mask.offsetHeight - 2){
                    y = box.offsetHeight - mask.offsetHeight - 2;//减2是减去边框
                }
                //让mask走起来
                mask.style.left = x + 'px';
                mask.style.top = y + 'px';
                //让大盒子的图片走起来
                /*
                小盒子要走的距离 / 大盒子要走的距离 =  小盒子的宽度 / 大盒子的宽度；
                大盒子距离 = 小盒子距离 * 大盒子宽度 / 小盒子宽度；
                 */
                bimg.style.left = - (x * big.offsetWidth / small.offsetWidth) + 'px';
                bimg.style.top =  -(x * big.offsetHeight / small.offsetHeight) + 'px';

            }
        };
        //鼠标离开小盒子
        small.onmouseout = function (ev1) {
            mask.style.display = 'none';
            big.style.display = 'none';
        };
        //遍历列表图片
        for ( var i = 0; i < allli.length; i++){
            (function (i) {
                var li = allli[i];
                li.onmouseover = function () {
                    small.children[0].src = 'image/pic00' + (i+1) + '.jpg';
                    bimg.src = 'image/pic0' + (i+1) + '.jpg';
                }
            })(i)
        }
    }
</script>
</body>
</html>

甜甜今天学了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记（放大镜特效）

案例：放大镜特效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> *{ margin: ...
复制链接

扫一扫