黑马程序员技术交流社区

标题: 【上海校区】js放大镜特效 [打印本页]

作者: 梦缠绕的时候 时间: 2019-9-26 08:45
标题: 【上海校区】js放大镜特效

1.首先我们还是先把div布局写出来

[url=]

[/url]
<div class="bfdj"> <div id="box"> <div id="bug1"> <img src="../img/b2.jpg" alt="" id="bug"> <div id="ball"></div> <div id="mask"></div> </div> <div id="bug2"> <img src="../img/b2.jpg" id="pic"> </div> </div>  <div id="bimg"> <div id="imgs"> <img src="../img/b2.jpg" alt="" id="img1"> <img src="../img/bbbb.jpg" alt="" id="img2"> <img src="../img/bbbb1.jpg" alt="" id="img3"> <img src="../img/bbbb2.jpg" alt="" id="img4"> <img src="../img/bbbb3.jpg" alt="" id="img5"> </div> </div></div>
<script src="../js/bf.js"></script>
[url=]

[/url]

　　2.其次是css部分

[url=]

[/url]
/*放大镜*/
*{
margin: 0;
padding: 0;
}
.bfdj{
width: 100%;
height: 570px;
/**/
}
#box{
width: 375px;
height: 350px;
position: relative;
margin-left: 300px;
top:100px;
/*right: ;*/
/**/
}
#bug1{
width: 376px;
height: 350px;
border: 1px solid gainsboro;
position: relative;
display: inline-block;
/*margin-left: 200px;*/
/**/
}
/*.box-right{*/
/*position: absolute;*/
/*float: right;*/
/**/
/*margin-left: 680px;*/
/*margin-top: -250px;*/
/*width: 600px;*/
/*height: 425px;*/
/*font-size: 16px;*/
/*font-family: 微软雅黑;*/
/*border: 1px solid lightgrey;*/
/*background-image: url("../img/bhh.jpg");*/
/*}*/
#bug1 img{
width: 100%;
height: 100%;
display: block;
}
#ball{
width: 150px;
height: 150px;
position: absolute;
top:0;
left: 0;
background-color: navajowhite;
opacity: 0.3;
/*display: none;*/
}
#mask{
width:100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: 5;
cursor: pointer;
}
#bimg{
position: relative;
margin-left: 300px;
margin-top: 100px;
}
#imgs img{
width: 70px;
height: 70px;
float: left;
border: 2px solid transparent;
margin-left: 2px;
margin-top: 2px;
position: relative;
/*margin-left: 400px;*/

}
#imgs img:first-child{
margin-left: 0;
}
#imgs img:hover{
border: 2px solid gray;
}

#bug2{
/**/
width: 376px;
height: 350px;
position: relative;
top:-355px;
left: 1px;
overflow: hidden;
display: none;
z-index: 4;
}
#bug2 img{
width: 400%;
height: 400%;
display: block;
border: none;
position: absolute;
z-index: 2;
}

[url=]

[/url]

　　3.最后是js部分代码

[url=]

[/url]
//放大镜 var bug = document.getElementById("bug"); var img1= document.getElementById("img1") var img2= document.getElementById("img2") var img3= document.getElementById("img3") var img4= document.getElementById("img4") var img5= document.getElementById("img5") img1.addEventListener("mousemove",function () { bug.src="../img/b2.jpg" }) img2.addEventListener("mousemove",function () { bug.src="../img/bbbb.jpg" }) img3.addEventListener("mousemove",function () { bug.src="../img/bbbb1.jpg" }) img4.addEventListener("mousemove",function () { bug.src="../img/bbbb2.jpg" }) img5.addEventListener("mousemove",function () { bug.src="../img/bbbb3.jpg" }) var bug1 = document.getElementById("bug1"); var ball = document.getElementById("ball"); var bug2= document.getElementById("bug2"); var rightImg = document.getElementById("pic"); img1.addEventListener("mousemove",function () { rightImg.src="../img/b2.jpg" }) img2.addEventListener("mousemove",function () { rightImg.src="../img/bbbb.jpg" }) img3.addEventListener("mousemove",function () { rightImg.src="../img/bbbb1.jpg" }) img4.addEventListener("mousemove",function () { rightImg.src="../img/bbbb2.jpg" }) img5.addEventListener("mousemove",function () { rightImg.src="../img/bbbb3.jpg" }) bug1.onmousemove =function (event) { var e = event || window.event; //获取鼠标对象 ball.style.display="block"; bug2.style.display="block"; //鼠标居中 var x = (e.offsetX || e.layerX) - ball.offsetWidth/2//offsetWidth获取 ball的宽度 var y = (e.offsetY || e.layerY) - ball.offsetHeight/2 if(x<=0){ x=0; }else if(x>box.clientWidth-ball.offsetWidth){ x=box.clientWidth-ball.offsetWidth } if(y<=0){ y=0; }else if(y>box.clientHeight-ball.offsetHeight){ y=box.clientHeight-ball.offsetHeight } ball.style.left=x+"px"; ball.style.top=y+"px"; //四倍大小 rightImg.style.left= x*-4 +"px" rightImg.style.top= y*-4 +"px"; this.onmouseout =function () { ball.style.display="none"; bug2.style.display="none"; } }[url=]

[/url]

作者: 梦缠绕的时候 时间: 2019-9-26 08:45
有任何问题欢迎在评论区留言

作者: 梦缠绕的时候 时间: 2019-9-26 08:45
或者添加学姐微信
DKA-2018

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2