本文实例为大家分享了JavaScript实现手风琴效果的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</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 = ["img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- 纯js实现手风琴效果代码
- 原生js做的手风琴效果的导航菜单
- 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
- Vue.js手风琴菜单组件开发实例
- js实现简单的手风琴效果
- js实现可折叠展开的手风琴菜单效果
- 纯js实现手风琴效果
- 原生JS实现垂直手风琴效果
- 炫酷的js手风琴效果
- JS实现图片手风琴效果
本文由 华域联盟 原创撰写:华域联盟 » JavaScript实现手风琴效果
转载请保留出处和原文链接:https://www.cnhackhy.com/50741.htm