js布局、放大镜

所有图片横向布局
图片之间的间隔为16px 
第一张图片的左边距为0 
最后一张图片的右边距为0

<style type="text/css">

.content {
border: 1px solid red;
height: 174px;
}
*{
padding: 0;
margin: 0;
}
.content ul{
margin: auto;
}
.content ul li{
list-style: none;
float: left;
margin-right: 15.6px;
}
.content ul li:last-child{
margin: 0;
}
.content ul li img{
display: block;
padding-top: 20px;
}
.content .last{
padding-left: 0;
}
</style>
</head>
<body>
<img src="img/res.png">
<div class="content">
<ul>
<li><img src="img/toplist_a01.jpg" ></li>
<li><img src="img/toplist_a02.jpg" ></li>
<li><img src="img/toplist_a03.jpg" ></li>
<li><img src="img/toplist_a04.jpg" ></li>
<li><img src="img/toplist_a05.jpg" ></li>
<li><img src="img/toplist_a06.jpg" ></li>
<li><img src="img/toplist_a07.jpg" ></li>
<li class="last"><img src="img/toplist_a08.jpg" ></li>
</ul>
</div>
</body>

效果：

放大镜：

 <script>

window.onload=function(){
var img=document.querySelectorAll(".small");
var big=document.querySelector(".big");
for (var i = 0; i < img.length; i++) {
img[i].onmousemove=function(e){
big.style.top=e.y+10+"px";
big.style.left=e.x+10+"px";
big.src=this.src;
}
img[i].onmouseout=function(){
big.style.display="none";
}
img[i].onmouseenter=function(){
big.style.display="block";
}
}
}

 </script>

body内容：

<body>
<img class="small" src="./img/toplist_a01.jpg" alt="">
<img class="small" src="./img/toplist_a02.jpg" alt="">
<img class="small" src="./img/toplist_a03.jpg" alt="">
<img class="big" src="./img/toplist_a01.jpg" alt="">
</body>

效果：  

posted @ 2021-11-20 12:14  与神明画过押  阅读(42)  评论(0)    收藏  举报