<!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. Typecho博客迁移

    在新的机器上先搭建好一个新的Typecho博客,数据库名称和原博客相同(可以省不少事). 备份原来博客的usr目录. 备份mysql数据库,命令: mysqldump -uroot -p --all- ...

  2. ubuntu查看本地ip

    1.下载net-tools sudo apt-get install net-tools 2.终端输入命令 ifconfig

  3. hive数据导入Sqoop工具

    下载Sqoop ,直接解压缩;然后导入2个环境变量 1.导入oracle数据库中表emp的数据到hive表中 1.导入到HDFS中 $ sqoop import --connect jdbc:mysq ...

  4. k8s 1.9 安装

    测试环境 主机 系统 master CentOS 7.3 node CentOS 7.3 2.关闭selinux(所有节点都执行) [root@matser ~]# getenforce Disabl ...

  5. ABP框架学习

    一.总体与公共结构 1,ABP配置 2,多租户 3,ABP Session 4,缓存 5,日志 6,设置管理 7,Timing 8,ABPMapper 9,发送电子邮件 二.领域层 10,实体 11, ...

  6. docker --Dockerfile--最小java环境

    # AlpineLinux open jre 8FROM alpine:latest # Install cURLRUN echo -e "https://mirror.tuna.tsing ...

  7. BZOJ1552[Cerc2007]robotic sort&BZOJ3506[Cqoi2014]排序机械臂——非旋转treap

    题目描述 输入 输入共两行,第一行为一个整数N,N表示物品的个数,1<=N<=100000. 第二行为N个用空格隔开的正整数,表示N个物品最初排列的编号. 输出 输出共一行,N个用空格隔开 ...

  8. bzoj 2212 : [Poi2011]Tree Rotations （线段树合并）

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2212 思路:用线段树合并求出交换左右儿子之前之后逆序对的数量,如果数量变小则交换. 实现 ...

  9. [luogu1373]小a和uim之大逃离【动态规划】

    传送门:https://www.luogu.org/problemnew/show/P1373 定义状态是:\(f[i][j][h][0..1]\)表示在\([i,j]\)两个人相差为h,让某一个人走 ...

  10. 【bzoj2007】 Noi2010—海拔

    http://www.lydsy.com/JudgeOnline/problem.php?id=2007 (题目链接) 题意 $(n+1)*(n+1)$的网格图上,相邻两点间有一些人流.左上角点的海拔 ...