鼠标滑动图片效果:舒缓展开特效。先看下效果图:
鼠标滑动到一个图上,展开,另外的图收起来,接下来看下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://www.jiangweishan.com/zb_users/upload/2021/03/202103311617157730789413.jpg", "https://www.jiangweishan.com/images/tt/vue.jpg", "https://www.jiangweishan.com/zb_users/upload/2021/03/202103311617157730789413.jpg", "https://www.jiangweishan.com/images/tt/vue.jpg", "https://www.jiangweishan.com/zb_users/upload/2021/03/202103311617157730789413.jpg", "https://www.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人参与
发表评论: