案例：手风琴

   
封装好的动画函数在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. 如何给Apache Pig自定义UDF函数？

    近日由于工作所需,需要使用到Pig来分析线上的搜索日志数据,散仙本打算使用hive来分析的,但由于种种原因,没有用成,而Pig(pig0.12-cdh)散仙一直没有接触过,所以只能临阵磨枪了,花了两天 ...

  2. apache+flask部署

    wsgi方式 1.安装apache 1.解压httpd并进行安装 # tar zxvf httpd-2.2.15.tar.gz # cd httpd-2.2.15    # ./configure - ...

  3. C++对C的扩展、增强

    C++对C的扩展 1. 双冒号::作用域运算符 代码中对同一个变量多次声明,在代码块中使用时,局部变量会将全局变量隐藏.若在代码块使用变量前添加::,表示为全局变量. ::表示作用域运算符,如常见的s ...

  4. str_replace函数的使用规则和案例详解

    str_replace函数的使用规则和案例详解 str_replace函数的简单调用: <?php $str = '苹果很好吃.'; //请将变量$str中的苹果替换成香蕉 $strg = st ...

  5. c语言一个例子对比php学习随记

    今天开始学写一些简单的C例子,发现很多和PHP不一样的地方,做个笔记. #include <stdio.h> int main(void) { int a,b; printf(" ...

  6. CentOS 6.5 Apache+SVN配置

    yum -y install subversion #安装SVN svnserve -- version #查看svn版本信息确定是否安装 yum -y install httpd #安装Apache ...

  7. JasperReports报表数据源10

    数据源的结构数据容器.同时生成报告,Jasper报表引擎获得来自数据源的数据.数据可以从数据库,XML文件,对象数组和集合中的对象来获得.我们将在本章填充报告所看到的fillReportXXX()方法 ...

  8. service network restart 报错重启失败

    Job for network.service failed because the control process exited with error code. See “systemctl st ...

  9. openCV抠图实验

    #include "pch.h" #include <opencv2/core/core.hpp> #include "opencv2/imgproc/img ...

  10. 字符界面总是显示 login incorrect

    一般来说出现这样的提示,是因为登陆的密码错误,如果密码中有数字,最好用主键盘输入,用数字键盘会有错误.