前端javascript+jquery实现手风琴式的滚动banner或产品展示图
Posted Dragonir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端javascript+jquery实现手风琴式的滚动banner或产品展示图相关的知识，希望对你有一定的参考价值。
实现效果
实现步骤
// 鼠标放入到li中该盒子变宽，其他盒子变窄，鼠标移开大盒子，恢复原样
// 实现步骤
// 1. 给li添加背景
// 2. 绑定onmouseover事件，鼠标放入到li中，该盒子变宽，其他盒子变窄
// 3. 移开盒子，恢复原样
实现代码
<!DOCTYPE html> <html> <head> <title>手风琴式图片展示列表</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; } body{ background-color: #2f2f2f; } div{ width: 1000px; margin: 100px auto; box-shadow: 1px 1px 20px #000; overflow: hidden; } div ul{ width: 1300px; list-style: none; } div ul li{ width: 200px; height: 150px; float: left; } </style> <script type="text/javascript" src="jquery1.0.0.1.js"></script> <!-- 引入jQuery --> <script type="text/javascript"> // 鼠标放入到li中该盒子变宽，其他盒子变窄，鼠标移开大盒子，恢复原样 // 实现步骤 // 1. 给li添加背景 // 2. 绑定onmouseover事件，鼠标放入到li中，该盒子变宽，其他盒子变窄 // 3. 移开盒子，恢复原样 window.onload = function(){ var div = document.getElementsByTagName("div")[0]; var liArr = div.getElementsByTagName("li"); // 1. 给li添加背景,使用background属性 for(var i=0; i<liArr.length; i++){ liArr[i].style.background = "url(images/0"+(i+1)+".jpg) no-repeat"; // 步骤 2 liArr[i].onmouseover = function(){ // 排他思想 for(var j=0; j<liArr.length; j++){ // 引用框架实现宽度变窄 animate(liArr[j], {"width":140}); // 注意：jQuery3需要写成 liArr[j].animate({""})的写法！！！ } // 设置触发的盒子的宽度 animate(this, {"width":490}); } } // 步骤 3 div.onmouseout = function(){ for(var j=0; j<liArr.length; j++){ // 引用框架实现宽度变窄 animate(liArr[j],{"width":200}); } } } </script>n </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
以上是关于前端javascript+jquery实现手风琴式的滚动banner或产品展示图的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 或 javascript 为父子属性创建手风琴式下拉菜单