<!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. book项目分析

    需求1:用户注册 需求如下: 1)访问注册页面 2)填写注册信息,提交给服务器 3)服务器应该保存用户 4)当用户已经存在----提示用户注册 失败,用户名已存在 5)当用户不存在-----注册成功 ...

  2. octave基本指令2

    octave基本指令2 数据移动 >> pwd %显示出当前路径 ans C:\Octave\3.2.4_gcc-4 >> cd 'G:\machine learning' % ...

  3. activiti-explorer disable demo

    https://community.alfresco.com/thread/203012-activiti-explorer engine.properties # demo data propert ...

  4. 从Silverlight到ExtJS再到BootStrap，DataTable（DataGrid）的样式格式化原理没变

    <table id="tableOrder" data-toolbar="tableBtnGroup" data-row-style="rowS ...

  5. QQ的小秘密

    http://ssl.ptlogin2.qq.com/test http://ping.huatuo.qq.com/ http://localhost.ptlogin2.qq.com:4300/mc_ ...

  6. Ubuntu设置静态IP的方法

    通过修改配置文件/etc/network/interfaces,如果/etc/resolv.conf中提示nameserver会被resolvconf修改,是临时文件,那么dns server也可以在 ...

  7. width() 、 height() 方法；innerWidth() 、innerHeight() 方法；outerWidth() 、 outerHeight() 方法的区别

    1.width() . height() 方法 设置或返回元素的宽度.高度(不包括内边距.边框或外边距): 2.innerWidth() .innerHeight() 方法 返回元素的宽度.高度(包括 ...

  8. select、poll、epoll之间的区别总结[整理]【转】

    转自:http://www.cnblogs.com/Anker/p/3265058.html select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符 ...

  9. 使用ssh tunnel 来做代理或跳板

    接前文 http://www.cnblogs.com/piperck/p/6188984.html  使用ssh config配置文件来管理ssh连接 前文说了如何配置自己的ssh config 来方 ...

  10. Hashtable数据存储结构-遍历规则，Hash类型的复杂度为啥都是O(1)-源码分析

    Hashtable 是一个很常见的数据结构类型,前段时间阿里的面试官说只要搞懂了HashTable,hashMap,HashSet,treeMap,treeSet这几个数据结构,阿里的数据结构面试没问 ...