案例：手风琴

   
封装好的动画函数在common.js里面
    //function getStyle(element, attr) {...}
    //function animate(element, json, fn) {...}

手风琴设置的是背景图吗,backgroudImage="url(image/***.jpg)";

当鼠标进入的时候，当前的宽度变为800，其余的遍历并设置为100；

鼠标离开的时候，所有li宽度变为400

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    ul {

      list-style: none;

    }

    * {

      margin: 0;

      padding: 0;

    }

    div {

      width: 1150px;

      height: 400px;

      margin: 50px auto;

      border: 1px solid red;

      overflow: hidden;

    }

    div li {

      width: 240px;

      height: 400px;

      float: left;

    }

    div ul {

      width: 1300px;

    }

  </style>

</head>

<body>

  <div id="box">

    <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </div>

  <script src="common.js"></script>

  <script>

    //下面2个封装好的函数在common.js里面

    //function getStyle(element, attr) {

    //function animate(element, json, fn) {

    //先获取所有的li标签

    var list = my$("box").getElementsByTagName("li");

    for (var i = 0; i < list.length; i++) {

      list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

      //鼠标进入

      list[i].onmouseover = mouseoverHandle;

      //鼠标离开

      list[i].onmouseout = mouseoutHandle;

    }

    //进入和离开函数

    function mouseoverHandle() {

      for (var j = 0; j < list.length; j++) {

        animate(list[j], { "width": 100 });//动画效果

      }

      animate(this, { "width": 800 });

    }

    function mouseoutHandle() {

      for (var j = 0; j < list.length; j++) {

        animate(list[j], { "width": 240 });//动画效果

      }

    }

  </script>

</body>

</html>

JS---案例：手风琴 （利用封装好的动画函数）的更多相关文章

  1. js 封装一个均速动画函数

    //动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增 ...

  2. Js事件监听封装（支持匿名函数）

    先看demo:http://liutian1937.github.io/demo/EventListen.html/*绑定事件与取消绑定*/ var handleHash = {}; var bind ...

  3. JS---封装缓动（变速）动画函数---增加多个任意多个属性

    封装缓动动画函数---增加多个任意多个属性 在原来缓动动画函数,增加任意一个属性的基础上,做了如下改变 1. 原来function animate(element, attr, target),三个变 ...

  4. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  5. 原生JS实现动画函数的封装

    封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...

  6. 第一百四十三节，JavaScript，利用封装库做百度分享

    JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...

  7. JS---案例：移动元素，封装动画函数

    案例:移动元素,封装动画函数 1. div要移动,要脱离文档流---position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在styl ...

  8. jQuery---手风琴案例+stop的使用（解决动画队列的问题）

    手风琴案例+stop的使用(解决动画队列的问题) stop();// 停止当前正在执行的动画 <!DOCTYPE html> <html lang="en"> ...

  9. UIKit封装的系统动画

    简介 在UIKit中,对UIView封装了很多类方法来进行简单的动画实现,在动画过程中,通过对属性值的修改来完成一系列的效果. 在IOS4以前,主要通过 + beginAnimation + setA ...

随机推荐

  1. Python运算符，逻辑运算

    运算符 计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运算.赋值运算 ...

  2. Elasticsearch & Kibana with Shield

    Elasticsearch & Kibana with Shield   官方网站: https://www.elastic.co/guide/en/kibana/current/produc ...

  3. 详解 equals() 方法和 hashCode() 方法

    创建实体类时,最好重写超类(Object)的hashCode()和equals()方法 equals()方法: 通过该实现可以看出,Object类的实现采用了区分度最高的算法,即只要两个对象不是同一个 ...

  4. 2019-10-31-C#-dotnet-获取整个局域网的-ip-地址

    title author date CreateTime categories C# dotnet 获取整个局域网的 ip 地址 lindexi 2019-10-31 08:57:55 +0800 2 ...

  5. Ansible 安装使用过程中遇到过的问题

    1.[root@ansible ~]# ansible-doc -l [DEPRECATION WARNING]: docker is kept for backwards compatibility ...

  6. Django项目：CMDB(服务器硬件资产自动采集系统)--04--04CMDB本地(Agent)模式客户端唯一标识(ID)

    # client.py # ————————01CMDB获取服务器基本信息———————— from src import plugins #__init__.py from lib.serializ ...

  7. LA3983 Robotruck

    虫洞 单调队列优化DP,感觉比较套路?上不去Vjudge,也懒得打就随便口胡一下.sxy大佬要是您看的我要是扯淡麻烦提醒我一下QAQ sum[i]表示从0到i依次走的距离,sg[i]表示1~i的重量和 ...

  8. RxJS 入门指引和初步应用

    作者:徐飞链接:https://zhuanlan.zhihu.com/p/25383159来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. RxJS是一个强大的React ...

  9. GC Roots的几种对象

    在java语言里,可作为GC Roots的对象包括下面几种: >虚拟机栈(栈帧中的本地变量表)中的引用的对象: >方法区中类静态属性引用的对象: >方法区中常量引用的对象: > ...

  10. MATLAB---fopen、fprintf函数

    1 概述 fopen()是个将数据按指定格式读入到matlab中的函数. fprintf()是个将数据按指定格式写入到文本文件中的函数. 2 用法 2.1 fopen函数 matlab中fopen函数 ...