<!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. HDOJ2007_平方和与立方和

    应该注意到一个细节是题目中没有说明输入的两个数据一定是先小后大的关系,所以需要做一次判断.其他的比较简单. HDOJ2007_平方和与立方和 #include<iostream> #inc ...

  2. Jenkins and Python

    https://jenkins.io/solutions/python/ In the Python ecosystem there are tools which can be integrated ...

  3. 安裝CentOS7后修復win7引导

    想尝试双系统的心情想必大家都能理解,但是安装了双系统之后的收尾工作也是必不可少的,由于对Linux并不算很熟悉,所以在这方面花了不少时间,这里将CentOS7下修復windows7引导的解决方案记录下 ...

  4. 如何隐藏Win7登录界面的administrator用户名恢复

    很多朋友一直在用着第三方的Windows7系统盘来装机,例如下载了Ghost格式的一些装机盘.在这些第三方系统中,很多家都是默认使用administrator 帐户自动登陆的. 从安全的角度来讲,这样 ...

  5. mysql 8.0，运行springboot项目配置：

    1.修改pom.xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connecto ...

  6. 牛客网练习赛7-D-无向图（bfs，链式前向星）

    题意:中文题: 思路:就是找某个点距离其他点的距离,他给你很多点也无所谓.用一个dist[]数组,这个数组保存的是他给你的点到其他点的最短距离且标记的作用,然后bfs搜索就行了. 代码: #inclu ...

  7. std::string 字符串替换

    std::string 没有原生的字符串替换函数,需要自己来完成 string& replace_str(string& str, const string& to_repla ...

  8. BZOJ1805[Ioi2007]Sail船帆——线段树+贪心

    题目描述 让我们来建造一艘新的海盗船.船上有 N个旗杆,每根旗杆被分成单位长度的小节.旗杆的长度等于它被分成的小节的数目.每根旗杆上会挂一些帆,每张帆正好占据旗杆上的一个小节.在一根旗杆上的帆可以任意 ...

  9. BZOJ2173 整数的lqp拆分（生成函数）

    首先有序整数拆分有个显然的递推式是g(n)=Σg(i) (i=0~n-1),即枚举加入最后一个数之前和是多少.(虽然不用递推式也能显然地知道答案是2n-1). 类似地,lqp拆分有递推式f(n)=Σf ...

  10. ACdream1187-Rational Number Tree-模拟/找规律

    找到规律模拟就可以了,用DFS模拟很简洁,用循环模拟比较直观(大概吧) 注意输入输出用%llu,1ULL<<64=0!被这几个小问题卡了好久 #include <cstdio> ...