案例：手风琴

   
封装好的动画函数在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. 05_Hibernate数据库连接池

    一.配置连接池 连接池:连接池是创建和管理数据库连接的缓冲池技术. 优点:合理利用数据库连接资源.简化的编程模式.受控的资源使用. 主流连接池: DBCP(DataBase connection po ...

  2. Mount- Linux必学的60个命令

    1.作用 mount命令的作用是加载文件系统,它的用权限是超级用户或/etc/fstab中允许的使用者. 2.格式 mount -a [-fv] [-t vfstype] [-n] [-rw] [-F ...

  3. LeetCode387First Unique Character in a String字符串中第一个唯一字符

    给定一个字符串,找到它的第一个不重复的字符,并返回它的索引.如果不存在,则返回 -1. 案例: s = "leetcode" 返回 0. s = "loveleetcod ...

  4. 在输入一个url到返回页面，中间发生了什么？

    在浏览器中输入url,客户端先检查本地是否有对应的ip地址,如果找到了则返回响应的ip地址,如果没有找到则会请求DNS服务器,返回解析后的ip地址.应用层客户端发送HTTP请求,包括请求头和请求体.其 ...

  5. [转]C#中用NamedPipe进程间通信

    转自:http://blog.csdn.net/jinjazz/archive/2009/02/03/3861143.aspx 本文只是一个测试例子,核心代码是kernel32.dll中的一组wind ...

  6. Python中的HTMLParser、cookielib抓取和解析网页、从HTML文档中提取链接、图像、文本、Cookies（二）

    对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过 Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...

  7. 阿里云 Aliplayer高级功能介绍(八)：安全播放

    基本介绍 如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持 ...

  8. go 交叉编译扩展 ac68u 梅林固件， go 依赖 zoneinfo 的解决问题

    CGO_ENABLED= GOOS=linux GOARCH=arm GOARM= go build ddns.go r8500 虽然是 ARMv7 , 但应该是被阉割过,不支持 ARMv7 的一些特 ...

  9. gulp的安装以及less插件安装与使用

    1.安装node.js 下载地址:http://nodejs.cn/download/ 这时我们输入 node -v  以及  npm -v  检查是否安装成功. 2.为了提高后续使用的快速,我们安装 ...

  10. 深喉起底APP线下预装市场，如何一夜间拥有千万用户

    注:预装对于中国的移动互联网创业者有多重要?i黑马知道这样一个内幕,某商务告诉我他们公司的前2000万用户就是靠预装打下来的,总部在北京,直接派驻商务长期扎根在深圳搞定手机厂商.而这家公司初期发展得益 ...