案例：手风琴

   
封装好的动画函数在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. Java学习之二（线程（了解） JVM GC 垃圾回收）

    线程与进程(了解)→JVM→字节码→GC 一.程序 = 算法 + 数据结构(大佬) 二.程序 = 框架 + 业务逻辑(现实) 1.线程与进程.同步与异步 1.1进程是什么? 进程就是操作系统控制的基本 ...

  2. <每日一题>题目28：生成随机的测验试卷(单选题)

    #项目:生成随机的测验试卷文件 import random #资料库 capitals = {'北京市':'京','上海市':'沪','天津市':'津','重庆市':'渝','河北省':'冀','山西 ...

  3. ES6之主要知识点(二) 变量的解构赋值。默认值

    引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2 ...

  4. vue 实现邮戳边缘

    效果: vue: <template> <div class="couponItem"> <div class="itemLeft" ...

  5. 【转载：java】详解java中的注解（Annotation）

    目录结构: contents structure [+] 什么是注解 为什么要使用注解 基本语法 4种基本元注解 重复注解 使用注解 运行时处理的注解 编译时处理的注解 1.什么是注解 用一个词就可以 ...

  6. maven 项目在 tomcat 中启动报错：Caused by: java.util.zip.ZipException: invalid LOC header (bad signature)

    问题原因: 在下载 maven 依赖包的时候出现某种原因导致下载的依赖包出现损坏,jvm 和 maven 不能正常识别,从而导致出现该问题. 解决办法: 在 maven 仓库中搜索: in-progr ...

  7. fstream文件打开模式

    fstream:对于文件的操作很久两年前就开始使用了,但是仅仅为了达到满足自己需求的目的,就是要么是写,要么是读.从来没有对其进行详细的了解.自己也曾经想过花一点时间去总结一下,这个东西到底应该怎么用 ...

  8. linux学习(三)-----linux用户管理、实用指令

    用户管理 基本介绍 说明: 1.Linux 系统是一个多用户多任务的操作系统,任何一个要使用系统资源的用户,都必须首先向 系统管理员申请一个账号,然后以这个账号的身份进入系统. 2.Linux 的用户 ...

  9. Java内功修炼系列一代理模式

    代理模式是JAVA设计模式之一,网上设计模式相关的博文铺天盖地,参考它们有助于自己理解,但是所谓“尽信书不如无书”,在参考的同时也要思考其正确性,写博客也是为了记录自己理解知识点的思路历程和心路历程, ...

  10. Java的一些小知识

    Switch和If的区别: Switch case成功后将不再向下继续执行,而If却要每个条件判断一遍.过于浪费: Java中的多态: 方法重载: 通常是指在同一个类中,相同的方法名对应着不同的方法实 ...