js练习——放大镜效果

最新推荐文章于 2022-04-07 20:50:12 发布

Lemon

最新推荐文章于 2022-04-07 20:50:12 发布

阅读量220

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/98472093

版权

学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

先来波效果图

在这里插入图片描述

解析js

1. 所有的内容都写在`window.onload=function(){}`中：因为在该例子中，引用的是外部的js文件，且将引用语句写在了html之前，若不写在`window.onload=function(){}`中，则无法获取所有对象

window.onload = function () {
}

2. 在`window.onload=function(){}`中的for循环是在浏览器页面加载时，将函数（方法）赋给每个`img`的`onmouseenter`事件，赋完后for循环结束。当某一`img`对象触发它的`onmouseenter`事件时，会执行事件对应的函数。而不是在触发事件时才进行赋值以及执行。

 /**当鼠标移至某对象时，边框变为红色，其余对象的边框为透明。b-bottom-img样式为边框为透明的类。change为边框为红色的类**/
var temp = ''  //temp存储前一个被选中的对象
    for(var i=0;i<bBottomImg.length;i++){
        bBottomImg[i].onmouseenter = function () {
            temp.className="b-bottom-img";//前一个选中对象边框变为透明
            this.className="b-bottom-img change";//当前选中对象边框变为红色
            temp = this;//存储当前被选中对象
            middleImg.src = this.getAttribute("data-src");//当小图变化时，中大图都要相应的变为小图对应的图片
            bigImg.children[0].src = this.getAttribute("data-big");
        }
    }

 bTop.onmouseenter = function(){
 //当鼠标进入中图所在区域时，覆盖层和大图部分出现
        ceng.style.display = "block";
        bigImg.style.display = "block";
    }
    bTop.onmouseleave = function(){
    //当鼠标离开中图所在区域时，覆盖层和大图部分消失
        ceng.style.display = "none";
        bigImg.style.display = "none"
    };

//点击左右按钮进行简单轮播
  left.addEventListener("click",function (evt) {
        moveCenter.style.marginLeft = -190+"px"
    })
    right.addEventListener("click",function (evt) {
        moveCenter.style.marginLeft = 0
    })

3. 下面代码中，放大镜效果：先计算出中图和大图的宽高比例。再通过该比例计算遮盖块的宽与高（用大图所在div的宽和高分别除以两个比例）。当移动遮盖块时，根据遮盖块所在的定位位置，大图也会通过该比例计算出它相对于父元素的绝对定位。

//控制遮盖块在中图所在div中移动、移动区域的限制以及放大镜效果
    bTop.onmousemove = function(e){
        var x = e.pageX || e.clientX;//获取当前鼠标的x坐标
        var y = e.pageY||e.clientY;//获取当前鼠标的y坐标
        //offset是子元素相对于父元素的左右上下偏移量
        x = x-all.offsetLeft - parseFloat(ceng.style.width)/2;
        y = y-all.offsetTop - parseFloat(ceng.style.height)/2;
        //计算遮盖块的活动区域范围
        var bigLeft = parseFloat(window.getComputedStyle(bTop).width)- parseFloat(ceng.style.width);
        var bigTop = parseFloat(window.getComputedStyle(bTop).height) - parseFloat(ceng.style.height);
        x = x<=0?0:x>bigLeft?bigLeft:x;
        y = y<=0?0:y>bigTop?bigTop:y;
        //设置ceng对象的左、上定位
        ceng.style.left = x+"px";
        ceng.style.top=y+"px";
        //！！！重要，x与y的比例
        bgImg.style.left = (-x)*2.2988+"px";
        bgImg.style.top = (-y)*1.913+"px";

    };

4. 代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/放大镜.js" type="text/javascript"></script>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .all{
            position: relative;
            width: 350px;
            height: 500px;
            margin: 100px auto;
        }
        .all .b-top{
            position:relative;
            width:350px;
            height: 420px;
            border: 1px solid silver;
            z-index: 9999;
        }
        .all .b-top>img{
            width: 100%;
            height: 100%;
        }
        .all .b-bottom{
            position: relative;
            width: 350px;
            height: 80px;
            font-size:0 ;
            padding-top: 12px;
        }
        .all .b-bottom>span{
            display: inline-block;
            position: absolute;
            font-size: 20px;
            height: 80px;
            line-height: 80px;
            width:20px ;
            text-align: center;
            color: silver;
        }
        .all .b-bottom>span:hover{
            cursor: pointer;
            background: silver;
            color: white;
        }
        .all .b-bottom>span:first-of-type{
            left: 0;
            top:0;
        }
        .all .b-bottom>span:last-of-type{
            right: 0;
            top:0;
            top:0;
        }
        .all .b-bottom .b-bottom-center{
            width: 310px;
            height: auto;
            margin:0 auto;
            white-space: nowrap;
            overflow: hidden;
        }
        .all .b-bottom .b-bottom-center>.move-center{
            width: 500px;
            transition: margin .5s linear;
        }
        .all .b-bottom .b-bottom-center img{
            border: 3px solid transparent;
        }
        .change{
            border-color: #e40000 !important;
        }
        .ceng{
            display: none;
            position: absolute;
            top:0;
            left:0;
            z-index:1;
            background: rgba(200,200,200,.2);
            cursor:move;
        }
        .bigImg{
            /*display: none;*/
            position: absolute;
            left: 350px;
            top:0;
            width: 472px;
            height: 522px;
            border: 1px solid silver;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="b-top">
        <img src="img/middle8.jpg" class="middle-img"/>
        <div class="ceng" style=" width: 204.45px;height: 271.82px;"></div>
    </div>
    <div class="b-bottom">
        <span class="left"><</span>
        <div class="b-bottom-center">
            <div class="move-center">
                <img src="img/small8.jpg" data-src="img/middle8.jpg"  data-big="img/big8.jpg" class="b-bottom-img"/>
                <img src="img/small7.jpg" data-src="img/middle7.jpg"  data-big="img/big7.jpg" class="b-bottom-img"/>
                <img src="img/small6.jpg" data-src="img/middle6.jpg"  data-big="img/big6.jpg" class="b-bottom-img"/>
                <img src="img/small5.jpg" data-src="img/middle5.jpg"  data-big="img/big5.jpg" class="b-bottom-img"/>
                <img src="img/small4.jpg" data-src="img/middle4.jpg"  data-big="img/big4.jpg" class="b-bottom-img"/>
                <img src="img/small3.jpg" data-src="img/middle3.jpg"  data-big="img/big3.jpg" class="b-bottom-img"/>
                <img src="img/small2.jpg" data-src="img/middle2.jpg"  data-big="img/big2.jpg" class="b-bottom-img"/>
                <img src="img/small1.jpg" data-src="img/middle1.jpg"  data-big="img/big1.jpg" class="b-bottom-img"/>
            </div>
        </div>
        <span class="right">></span>
    </div>
    <div class="bigImg">
        <img src="img/big8.jpg" class="bgImg" style="position: absolute"/>
    </div>
</div>
</body>
</html>

var temp = ''
window.onload = function () {
    var bBottomImg = document.getElementsByClassName("b-bottom-img");
    var middleImg = document.getElementsByClassName("middle-img")[0];
    var left = document.getElementsByClassName("left")[0];
    var right = document.getElementsByClassName("right")[0];
    var moveCenter = document.getElementsByClassName("move-center")[0];
    var ceng = document.getElementsByClassName("ceng")[0];
    var bigImg = document.getElementsByClassName("bigImg")[0];
    var bTop = document.getElementsByClassName("b-top")[0];
    var all = document.getElementsByClassName("all")[0];
    var bgImg = document.getElementsByClassName("bgImg")[0]
    temp = bBottomImg[0];
    // temp.className="b-bottom-img change"
    temp.setAttribute("class","b-bottom-img change");
    for(var i=0;i<bBottomImg.length;i++){
        bBottomImg[i].onmouseenter = function () {
            temp.className="b-bottom-img";
            this.className="b-bottom-img change";
            middleImg.src = this.getAttribute("data-src");
            bigImg.children[0].src = this.getAttribute("data-big");
            temp = this;
        }
    }
    bTop.onmouseenter = function(){
        ceng.style.display = "block";
        bigImg.style.display = "block";
    }
    bTop.onmouseleave = function(){
        ceng.style.display = "none";
        bigImg.style.display = "none"
    };
    bTop.onmousemove = function(e){
        var x = e.pageX || e.clientX;
        var y = e.pageY||e.clientY;
        console.log(x);
        console.log(y);
        x = x-all.offsetLeft - parseFloat(ceng.style.width)/2;
        y = y-all.offsetTop - parseFloat(ceng.style.height)/2;
        var bigLeft = parseFloat(window.getComputedStyle(bTop).width)- parseFloat(ceng.style.width);
        var bigTop = parseFloat(window.getComputedStyle(bTop).height) - parseFloat(ceng.style.height);
        x = x<=0?0:x>bigLeft?bigLeft:x;
        y = y<=0?0:y>bigTop?bigTop:y;
        ceng.style.left = x+"px";
        ceng.style.top=y+"px";
        bgImg.style.left = (-x)*2.2988+"px";
        bgImg.style.top = (-y)*1.913+"px";

    };
    left.addEventListener("click",function (evt) {
        moveCenter.style.marginLeft = -190+"px"
    })
    right.addEventListener("click",function (evt) {
        moveCenter.style.marginLeft = 0
    })
}

Lemon

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js练习——放大镜效果

解析js1. 所有的内容都写在window.onload=function(){}中：因为在该例子中，引用的是外部的js文件，且将引用语句写在了html之前，若不写在window.onload=function(){}中，则无法获取所有对象window.onload = function () {}2. 在window.onload=function(){}中的for循环是在浏览器页面加...
复制链接

扫一扫