鼠标滑动图片效果：舒缓展开特效。先看下效果图：
鼠标滑动到一个图上，展开，另外的图收起来，接下来看下DEMO。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滑动图片效果：舒缓展开特效</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
text-align: center;
}
ul li {
list-style: none;
overflow: hidden;
display: inline-block;
transition: all 1s;
}
</style>
</head>
<body>
<ul>
</ul>
<script>
var ul = document.querySelector("ul");
var imgs = ["https://jiangweishan.com/zb_users/upload/2021/03/202103311617157730789413.jpg", "https://jiangweishan.com/images/tt/vue.jpg", "https://jiangweishan.com/zb_users/upload/2021/03/202103311617157730789413.jpg", "https://jiangweishan.com/images/tt/vue.jpg", "https://jiangweishan.com/zb_users/upload/2021/03/202103311617157730789413.jpg", "https://jiangweishan.com/images/tt/vue.jpg", ];
for (var i = 0; i < imgs.length; i++) {
var li = document.createElement("li");
var img = document.createElement("img");
img.src = imgs[i];
li.appendChild(img);
ul.appendChild(li);
}
var lis = document.querySelectorAll("li");
window.onload = window.onresize = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
var imgM = document.querySelectorAll("img");
for (let i = 0; i < imgM.length; i++) {
imgM[i].onmouseenter = function() {
for (var j = 0; j < imgM.length; j++) {
lis[j].style.width = ((ul.offsetWidth - imgM[i].offsetWidth) / (imgs.length - 1)) - 10 + "px";
}
lis[i].style.width = imgM[i].offsetWidth + "px";
}
imgM[i].onmouseleave = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
}
</script>
</body>
</html>预览试试吧。
网友评论文明上网理性发言 已有0人参与
发表评论: