<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style media="screen">

         * {

             margin: 0;

             padding: 0;

         }

         div {

             width: 1150px;

             height: 400px;

             margin: 50px auto;

             border: 1px solid #ddd;

             overflow: hidden;

         }

         ul {

             list-style: none;

         }

         div ul {

             width: 1300px;

         }

         div li {

             width: 240px;

             height: 400px;

             float: left;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div>

         <ul>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

         </ul>

     </div>

     <script src="animate.js" charset="utf-8"></script>

     <script type="text/javascript">

         var div = document.getElementsByTagName("div")[0];

         var liArr = div.getElementsByTagName("li");

         //给li添加背景颜色

         var colorArr = ["mistyrose", "lemonchiffon", "gold", "orange", "tomato"];

         for (var i = 0; i < colorArr.length; i++) {

             liArr[i].style.backgroundColor = colorArr[i];

             //绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄

             liArr[i].onmouseover = function(){

                 //排他思想

                 for (var j = 0; j < liArr.length; j++) {

                     //引用框架实现宽度变窄

                     animate(liArr[j],{"width": 100});

                 }

                 //剩下自己

                 animate(this,{"width": 800});

             }

         }

         //移开大盒子，回复原样

         div.onmouseout = function(){

             for (var j = 0; j < liArr.length; j++) {

                 //引用框架实现宽度变窄

                 animate(liArr[j],{"width": 240});

             }

         }

     </script>

 </body>

 </html>

javascript 实现手风琴特效的更多相关文章

  1. javascript中手风琴特效

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 图片每天换及纯css3手风琴特效

    <a target="_blank" id="a"><img id="img" /></a> <s ...

  3. JavaScript实战-菜单特效

    以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...

  4. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  5. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  6. 一款点击图片进行无限循环的jquery手风琴特效

    一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...

  7. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  8. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

  9. javascript图片展示墙特效

    查看效果:http://hovertree.com/code/javascript/pwl4bhoi.htm 代码如下: <!DOCTYPE html> <html> < ...

随机推荐

  1. ADC转换的分辨率

    分辨率是指ADC能够分辨量化的最小信号的能力.分辨率用二进制位数表示.例如对一个10位的ADC,其所能分辨的最小量化电平为参考电平(满量程)的2的10次方分之一.也就是说分辨率越高,就能把满量程里的电 ...

  2. SVN入门教程

    1. 什么是SVN SVN全名Subversion,即版本控制系统.SVN与CVS一样,是一个跨平台的软件,支持大多数常见的操作系统. 作为一个开源的版本控制系统,Subversion管理者随时间改变 ...

  3. jQuery empty() vs remove()

    https://stackoverflow.com/questions/3090662/jquery-empty-vs-remove http://www.cnblogs.com/yeer/archi ...

  4. MySql连接空闲8小时自动断开引起的问题

    一.问题描述 ​ 最近遇到了一个奇怪的MySql数据库问题,好几次前一天晚上历史数据还正常存储,第二天早上来了看实时数据存储还正常,历史数据不存储了.找了好久也没找到问题.后来仔细想了想,历史数据设置 ...

  5. Linux预处理、编译、汇编、链接和运行的过程（包括一些基本的命令）

    转自Quinn0918的博客 一.预编译 1.将所有的#define删除,并展开所有的宏定义: 2.处理所有的预编译指令,例如:#if,#elif,#else,#endif; 3.处理#include ...

  6. BZOJ4001[TJOI2015]概率论——卡特兰数

    题目描述 输入 输入一个正整数N,代表有根树的结点数 输出 输出这棵树期望的叶子节点数.要求误差小于1e-9 样例输入 1 样例输出 1.000000000 提示 1<=N<=10^9 设 ...

  7. JavaScript 数据类型检测总结

    JavaScript 数据类型检测总结 原文:https://blog.csdn.net/q3254421/article/details/85483462 在js中,有四种用于检测数据类型的方式,分 ...

  8. windows上搭建nginx

    命令 相关命令(需定位到所在目录):安装:start nginx.exe 停止运行:nginx.exe -s stop 或在进程找到nginx.exe结束重启:nginx.exe -s reload ...

  9. MT【232】展开式中的系数

    $(1+x+x^2+\cdots+x^{100})^3$展开式中$x^{150}$前的系数为_____ 解答:$(1+x+x^2+\cdots+x^{100})^3=(1-x^{101})^3\sum ...

  10. android GridView 的使用 实现多项选择

    今天小研究了一下GridView,目的是为了实现 下面的效果(GridView多项选择): 首先,在布局文件添加GridView ,创建适配器的items... 具体的都在注释里边了,下面是 程序源码 ...