案例：手风琴

   
封装好的动画函数在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. 04_jQuery对象初识(三)

    <div id="d1"> <p><span>span</span></p> <div>div</di ...

  2. linux-c getopt()参数处理函数

    转自:https://www.cnblogs.com/qingergege/p/5914218.html 最近在弄Linux C编程,本科的时候没好好学啊,希望学弟学妹们引以为鉴. 好了,虽然啰嗦了点 ...

  3. 利用animate.css和es6制作文字向上滚动的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

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

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

  5. Java面试总结-基础篇2

    1. mvn的dependency-management dependency-management是声明依赖,不实际引入,主要用于在父依赖中统一各依赖的版本,否则,各个子模块在引用同一依赖时,难免会 ...

  6. MyBatis-Spring(四)--MapperFactoryBean实现增删改查

    上一篇文章中提到,使用SqlSessionTemplat时需要输入一长串字符串来获取mapper,这种方式IDE不会检查程序的准确性并且很容易出错,所以这篇文章介绍另一种可以避免这种问题,并且也可以使 ...

  7. jQuery 取值、赋值的基本方法整理

    /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textva ...

  8. No module named 'sklearn.impute'，更新scikit-learn

    -------我错了,本篇作废,我把自己的包更新坏了,大家不要往下看了------------------最终我是把anaconda卸载重装的--------- 使用scikit-learn模块进行缺 ...

  9. MySQL系列(七)--SQL优化的步骤

    前面讲了如何设计数据库表结构.存储引擎.索引优化等内存,这篇文章会讲述如何进行SQL优化,也是面试中关于数据库肯定会被问到的, 这些内容不仅仅是为了面试,更重要的是付诸实践,最终用到工作当中 之前的M ...

  10. （5）连续非周期信号的傅里叶变换（频谱） & 周期信号的傅里叶变换

    参考资料:<信号与系统(第二版)> 杨晓非 何丰 从傅里叶级数到傅里叶变换 通过分析连续周期信号的周期与频谱的关系,当周期趋于无穷大的时候,周期信号变成非周期信号.从频谱分析观点来看,当T ...