<!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. .NET 使用 RabbitMQ 图文简介

    前言 最近项目要使用RabbitMQ,园里里面已经有很多优秀的文章,Rabbitmq官网也有.net实例.这里我尝试下图文并茂之形式记录下使用的过程. 安装 RabbitMQ是建立在erlang OT ...

  2. PAT 1028 人口普查

    https://pintia.cn/problem-sets/994805260223102976/problems/994805293282607104 某城镇进行人口普查,得到了全体居民的生日.现 ...

  3. Docker中安装Nexus3

    https://blog.csdn.net/sqandczm/article/details/78560710 https://hub.docker.com/r/sonatype/nexus/ htt ...

  4. JQuery 操作 radio 被坑一例

    .removeAttr('checked'); .prop('checked',false); .prop('checked',true); 与 .attr("checked",t ...

  5. python3_列表、元组、集合、字典

    列表list #列表的基本操作 >>> a=[] #创建空列表 >>> a = [0,1,2,3,4,5] #创建列表并初始化,列表是[]包含由逗号分隔的多个元素组 ...

  6. Node require

    var user = require("./module_user");//使用模块 module_userconsole.log(user.userCount);user.use ...

  7. const，static，volatile关键字的作用

    const关键字: 1.欲阻止一个变量被改变,可使用const,在定义该const变量时,需先初始化,以后就没有机会改变他了: 2.对指针而言,可以指定指针本身为const,也可以指定指针所指的数据为 ...

  8. SQL 从一个表读取数据存到另一个表

    原来没有的创建的表select * into 表A form 表B where条件 原来存在的表insert into 表A select * from 表B where 条件 INSERT INTO ...

  9. MVC DropDownList

    最近发现一个 MVC中绑定前台DropDownList , 并且设置默认选中项的简单方法. 直接上代码 方案一 Action:  ViewData["goodsTypeList"] ...

  10. QT 5 安装 vs2017 后，出现找不到 rc.exe 问题

    QT 5 安装 vs2017 后,出现找不到 rc.exe 问题 qt 5 cannot run 'rc.exe' 出现这种错误,是因为,rc.exe  未找到,也就是 SKD 路径不对. 找到相应的 ...