时间:2021-05-26
本文实例为大家分享了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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图:具体的javascript
复制代码代码如下://jquery实现手风琴效果手风琴$(function(){$("#accordion").accordion({header:"h3",e
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一、纯css+html的手风琴效果这种用css写的手风琴比较
一、手风琴菜单效果图及代码如下:手风琴效果制作.con{width:908px;height:300px;margin:50pxauto;overflow:hi
效果预览php:lb03手风琴叠加轮播lb03.phpassets/images/frontpage.png手风琴叠加轮播效果true我是类目标题一assets