1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         ul {
  8.             list-style: none
  9.         }
  10.  
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         div {
  17.             width: 1150px;
  18.             height: 400px;
  19.             margin: 50px auto;
  20.             border: 1px solid red;
  21.             overflow: hidden;
  22.         }
  23.  
  24.         div li {
  25.             width: 240px;
  26.             height: 400px;
  27.             float: left;
  28.             /*background-image: url(images/1.jpg);*/
  29.         }
  30.  
  31.         div ul {
  32.             width: 1300px;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37. <div id="box">
  38.     <ul>
  39.         <li></li>
  40.         <li></li>
  41.         <li></li>
  42.         <li></li>
  43.         <li></li>
  44.     </ul>
  45. </div>
  46. <script>
  47.     //找人
  48.     var box = document.getElementById("box");
  49.     var ul = box.children[0];
  50.     var lis = ul.children;
  51.     //循环遍历 lis 绑定背景图
  52.     for (var i = 0; i < lis.length; i++) {
  53.         lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
  54.         //给每一个li注册鼠标经过事件 鼠标经过后要排他
  55.         lis[i].onmouseover = function () {
  56.             //干掉所有人 让所有人的宽度 渐渐地 变为100
  57.             for (var j = 0; j < lis.length; j++) {
  58.                 animate(lis[j], {"width": 100});
  59.             }
  60.             //留下我自己 让我的宽度 渐渐地 变为800
  61.             animate(this, {"width": 800});
  62.         };
  63.     }
  64.     //鼠标离开box 所有的li宽度 渐渐地 变为240
  65.     box.onmouseout = function () {
  66.         for (var i = 0; i < lis.length; i++) {
  67.             animate(lis[i], {"width": 240});
  68.         }
  69.     };
  70.  
  71.     function animate(obj, json) {
  72.         clearInterval(obj.timer);
  73.         obj.timer = setInterval(function () {
  74.             //先假设 这一次执行完 所有的属性都到达目标了
  75.             var flag = true;
  76.             for (var k in json) {
  77.                 var leader = parseInt(getStyle(obj, k)) || 0;
  78.                 var target = json[k];
  79.                 var step = (target - leader) / 10;
  80.                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
  81.                 leader = leader + step;
  82.                 obj.style[k] = leader + "px";
  83.                 //if (leader === target) {
  84.                 //    clearInterval(obj.timer);
  85.                 //}
  86.                 console.log("代码还在运行");
  87.                 if (leader != target) {
  88.                     flag = false;//告诉标记 当前这个属性还没到达
  89.                 }
  90.             }
  91.             //如果此时仍然为true 就说明真的都到达了
  92.             if (flag) {
  93.                 clearInterval(obj.timer);
  94.             }
  95.         }, 15);
  96.     }
  97.     //全部属性都到达目标值才能清空
  98.     function getStyle(obj, attr) {
  99.         if (window.getComputedStyle) {
  100.             return window.getComputedStyle(obj, null)[attr];
  101.         } else {
  102.             return obj.currentStyle[attr];
  103.         }
  104.     }
  105. </script>
  106. </body>
  107. </html>

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

  1. javascript 实现手风琴特效

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

  2. 使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  3. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  4. CSS3和javascript中的transform

    在javascript中,WebkitTransform 大概相当于 transform .transform 为标准,WebkitTransform 适用于Webkit浏览器.js中的WebkitT ...

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

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

  6. JavaScript实战-菜单特效

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

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

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

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

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

  9. 了解javascript中的事件（二）

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

随机推荐

  1. shell问题-报错即退出

    如下: #!/bin/bash set -o errexit 在最开头加上 set -o errexit 即可(或者 set -e) 要关闭的时候 set +o errexit        (或者 ...

  2. 路飞学城Python-Day117

    jango用户登录界面 """ Django settings for cnblog project. Generated by 'django-admin startp ...

  3. 面试题1-----SVM和LR的异同

    1.异(加下划线是工程上的不同) (1)两者损失函数不一样 (2)LR无约束.SVM有约束 (3)SVM仅考虑支持向量. (4)LR的可解释性更强,SVM先投影到更高维分类再投影到低维空间. (5)S ...

  4. buddyinfo 内存碎片数据采集

    不说了,上工具 #cat buddyinfo.sh #!/bin/sh #*************************************************************** ...

  5. 网络教程(7）OSI模型的低层模型

    OSI Model——Open System Interconnection Model 开放系统互联模型

  6. 不能使用一般 Request 集合

    request.querystring("id"),不能request("id")

  7. Ajax技术实战操练课堂学习笔记

    ajax是什么 ? ajax(asynchronouse javascript and xml) 异步的javascript 和 xml 是7种技术的综合,它包含了七个技术( javascript x ...

  8. 【LibreOJ 6278】 数列分块入门 2 （分块）

    题目原址 给出一个长为n的数列,以及n个操作,操作涉及区间加法,询问区间内小于某个值x的元素个数. code: #include<cstdio> #include<iostream& ...

  9. Linux设备驱动--块设备（二）之相关结构体（转）

    上回最后面介绍了相关数据结构,下面再详细介绍 块设备对象结构 block_device 内核用结构block_device实例代表一个块设备对象,如:整个硬盘或特定分区.如果该结构代表一个分区,则其成 ...

  10. 《你又怎么了我错了行了吧》【Alpha】Scrum meeting 1

    第一天 日期:2019/6/14 前言: 第1次会议在9C-405召开 4个人讨论了整体代码的框架.布局.找出需要改进的地方重点讨论.明确编码的具体分工,每个人搭建好环境. 1.1 今日完成任务情况以 ...