js放大镜效果

最新推荐文章于 2021-12-23 22:17:31 发布

不归少年

最新推荐文章于 2021-12-23 22:17:31 发布

阅读量454

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/98471370

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果图

html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东商城放大镜效果</title>
    <!-- 链接css-->
    <link rel="stylesheet" href="jd-fdj.css"/>
    <!-- 链接js-->
    <script src="jd-fdj.js"></script>
</head>
<body>
<!--jd最外层盒子-->
<div class="jd-fdj">
    <!-- 放中图的盒子-->
    <div class="jd-fdj-middle">
        <!-- 中图图片-->
        <img class="jd-fdj-middle-img" src="images/middle1.jpg"  alt="" class="jd-fdj-middle-img"/>
        <!-- 层-->
        <div class="ceng">

        </div>
    </div>
    <!-- jd大图显示  以jd-fdj为相对定位-->
    <div class="jd-fdj-big">

    </div>
    <!-- jd小图 最外层盒子-->
    <div class="jd-fdj-small">
       <!-- left 箭头-->
        <span class="jd-small-left"><</span>
        <!-- jd小图层-->
        <div class="jd-fdj-small-ceng">
            <!-- jd小图集合-->
            <div class="jd-fdj-small-img">
                <!--jd每一张图片-->
                <div class="jd-fdj-small-every" data-middle="images/middle1.jpg" data-big="images/big1.jpg"><img src="images/small1.jpg" alt=""/></div>
                <div class="jd-fdj-small-every" data-middle="images/middle2.jpg" data-big="images/big2.jpg"><img src="images/small2.jpg" alt=""/></div>
                <div class="jd-fdj-small-every" data-middle="images/middle3.jpg" data-big="images/big3.jpg"><img src="images/small3.jpg" alt=""/></div>
                <div class="jd-fdj-small-every" data-middle="images/middle4.jpg" data-big="images/big4.jpg"><img src="images/small4.jpg" alt=""/></div>
                <div class="jd-fdj-small-every" data-middle="images/middle5.jpg" data-big="images/big5.jpg"><img src="images/small5.jpg" alt=""/></div>
                <div class="jd-fdj-small-every" data-middle="images/middle6.jpg" data-big="images/big6.jpg"><img src="images/small6.jpg" alt=""/></div>
                <div class="jd-fdj-small-every" data-middle="images/middle7.jpg" data-big="images/big7.jpg"><img src="images/small7.jpg" alt=""/></div>
                <div class="jd-fdj-small-every" data-middle="images/middle8.jpg" data-big="images/big8.jpg"><img src="images/small8.jpg" alt=""/></div>
            </div>
        </div>
        <!-- right 箭头-->
        <span class="jd-small-right">></span>
    </div>
</div>
</body>
</html>

css部分

在这里插入代码片/*共用设置*/
* {
    padding: 0;
    margin: 0;
}
/*最外层盒子*/
.jd-fdj {
    width: 400px;
    height: 460px;
    /*background-color: red;*/
    /*margin: auto;*/
    position: relative;
}
/*中图盒子*/
.jd-fdj-middle {
    width: 400px;
    height: 400px;
    background-color: black;
    border: solid 1px silver;
    position: relative;
} 
/*中图*/
.jd-fdj-middle>img {
    width: 100%;
    height: 100%;
}
/*中图层*/
.ceng {
    width: 196.876px;
    height: 246.758px;
    background: url("images/bg.png") repeat;
    background-size: 5px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
} 
/*jd小盒子*/
.jd-fdj-small {
    width: 400px;
    height: 50px;
    position: relative;
}
/*jd小图层*/
.jd-fdj-small-ceng {
    width: 340px;
    height: 50px;
    margin: 5px auto;
    overflow: hidden;
} 
/*jd小图集合*/
.jd-fdj-small-img {
    height: 45px;
    width: 470px;
    font-size: 0;
    margin-left: 0;
    transition:margin-left 0.3s linear;
} 
/*jd每一张图片*/
.jd-fdj-small-every {
    width: 45px;
    height: 45px;
    display: inline-block;
    margin-right: 5px;
    border:solid 2px transparent;
    /*border-size:2px;*/
    /*border-color: transparent;*/
    /*border-style: solid;*/
}
.jd-fdj-small-every>img {
    width: 45px;
    height: 45px;
}
/*箭头*/
/*用浮动的话，右浮动  右边的图片占位置，只不过被溢出隐藏了，所以箭头span右浮动会到下一行*/
.jd-fdj-small>span {
    display: block;
    width: 15px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: black;
    position:absolute;
    top: 0;
}
.jd-small-left {
    left: 0;
}
.jd-small-right {
    right: 0;
}
.jd-fdj-small>span:hover {
    background-color: darkgray;
    cursor: pointer;
}
/*jd右侧大图*/ 
.jd-fdj-big {
    width: 450px;
    height: 470px;
    border: solid 1px black;
    position: absolute;
    top: 0;
    left: 400px;
    display: none;
    background: url("images/big1.jpg") no-repeat;
}

js部分

/**
 * Created by Administrator on 2019/8/4.
 */
//加载完成时，执行函数
window.onload=function(){
//小图区域
//边框颜色变化、箭头点击图片移动
//定义全局变量  ！！！
    var old =null;
    //jd每一个小图片盒子
    var snew=document.getElementsByClassName("jd-fdj-small-every");
   // 中-img、大盒子
    var middleimg = document.getElementsByClassName("jd-fdj-middle-img")[0];
    var bigimg=document.getElementsByClassName("jd-fdj-big")[0];
    //span
    var left=document.getElementsByClassName("jd-small-left")[0];
    var right=document.getElementsByClassName("jd-small-right")[0];
    //小图集合盒子
    var smallceng=document.getElementsByClassName("jd-fdj-small-img")[0];
    //中图盒子
    var middlediv=document.getElementsByClassName("jd-fdj-middle")[0];
    //层
    var ceng= document.getElementsByClassName("ceng")[0];
    //最外层盒子
    var jd=document.getElementsByClassName("jd-fdj")[0];
    //将默认的赋给old  ！！！
    old=snew[0];
    //鼠标进入时  边框变
    for(var i=0;i<=snew.length;i++){
        snew[i].onmouseenter=function(){
            old.style.borderColor="transparent";
            this.style.borderColor="red";
            old=this;
        //    与此同时，中、大盒子中的图片也变
        //    getAttribute属性 !!!
            middleimg.src=this.getAttribute("data-middle");
            bigimg.style.backgroundImage="url("+this.getAttribute("data-big")+")";
        }
        //span箭头操作 点击左边箭头  整体向右走，即距离左外边距为0  点击右边箭头 整体向左走  外边距 340-470=-130
            left.onclick=function (){
             smallceng.style.marginLeft=0;
            }
            right.onclick=function (){
                smallceng.style.marginLeft=-130+"px";
            }
        //进入中图的时候，大图显示 蓝色图层显示 鼠标形式变
        middlediv.onmouseenter=function (){
            bigimg.style.display="block";
            ceng.style.display="block";
            this.style.cursor="move";
        }
        middlediv.onmouseleave=function(){
            bigimg.style.display="none";
            ceng.style.display="none";
        }
        //中图 图层移动的时候  图层的活动区域、移动  大图跟着一块动 等比例 相对位移
         ceng.onmousemove=function(e){
             //获取鼠标坐标
             var x= e.pageX|| e.clientX;
             var y= e.pageY|| e.clientY;
             //获取最外层盒子距离坐标的距离
             var left= jd.offsetLeft;
             var top=jd.offsetTop;
             //差
             //window.getComputedStyle(ceng)  !!! 不带引号！！！
             x= x-left-parseFloat(window.getComputedStyle(ceng).width)/2;
             y= y-top-parseFloat(window.getComputedStyle(ceng).height)/2;
             //限制图层移动范围 最左边left0 最上边top0  最下边 middlediv-ceng   最右边  middlediv-ceng
             var bigleft=(parseFloat(window.getComputedStyle(middlediv).width) - parseFloat(window.getComputedStyle(ceng).width));
             var bigtop=(parseFloat(window.getComputedStyle(middlediv).height) - parseFloat(window.getComputedStyle(ceng).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";
             //大图实际宽高 800*800    和中图实际宽高 350*420   比例  宽  2.2857  高  1.9047  !!!!
             //计算、修改蓝色图层宽高  196.876*246.758  450/2.2857  470/1.9047
             // 大图随着蓝图层移动 中图向右  大图向左 背景图片位置移动 ： 水平位置 垂直位置  第一个px里要有空格！！！
             bigimg.style.backgroundPosition= -x*2.2857+"px "+(-y*1.9047)+"px";
         }

    }
}

总结

1、页面的搭建要仔细、结构清晰！！！（第一次自己做的时候因为使用快捷方法没用好，结构乱了……）
2、js样式的相关操作
js操作的样式为元素的行内样式
js不能直接操作内嵌或者外部样式
个人理解：优先级的问题
在这里插入图片描述

这是一段代码

 <input type="text" id="user">

通过控制台输出其样式

//最初  什么都不设置
 var user=document.getElementById("user");
 console.log(user.style);//拥有样式 样式值为空字符串 0 
        
//通过内嵌设置user的样式
 <style>
    #user {
        width: 300px;
    }
    </style>
 console.log(user.style);//空字符串
 
//通过js设置
console.log(user.style);//空字符串  未修改前
user.style.width="300px"  //修改元素行内样式属性
console.log(user.style.width);// 300px  

//行内样式设置
<input type="text" id="user1" style="width: 300px">
var user1=document.getElementById("user1");
console.log(user1.style);//300px

我是这样理解的：user.style.width=“300px” 设置之后与通过行内样式设置的结果相同，说明style里的属性都是行内样式，那么user.style.width=“300px” 就是直接修改元素的行内样式。元素未进行任何设置时，控制台输出style，样式属性值为空字符串或0，即行内样式属性默认值为空字符串或0，当使用内嵌样式或外部样式为元素设置属性时，因为行内元素的优先级比他们高，所以元素属性值依旧是空字符串或0，所以js不能直接操作内嵌样式或外部样式！
user 最初在这里插入图片描述
user1 将width进行了更改，其余都相同

如何获取内嵌样式或者外部样式

console.log(window.getComputedStyle(对象).属性);

注意：对象不能有引号！！！这种方法三种样式都可以用！！！

3、getAttribute属性

   可以用于获取自定义属性 （data-   ）

 middleimg.src=this.getAttribute("data-middle");

4、三目运算符：判断语句？成立代码块：不成立代码块
5、背景图片位置移动：水平位置垂直位置第一个px里要有空格

bigimg.style.backgroundPosition= -x*2.2857+**"px "**+(-y*1.9047)+"px";

不归少年

关注

0
点赞
踩
0

收藏

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

html部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>京东商城放大镜效果</title>  <link rel="stylesheet" href="j...
复制链接

扫一扫

专栏目录