手风琴效果（js版本以及jquery版本）

最近又复习了jQuery的知识，既然jQuery是javascript的一个库。jQuery能做到的事情javascript也能做到。因此用这两种方法实现了图片手风琴效果
按照惯例，还是上代码吧，因为代码里有我的注释也就相当于解释了！(^__^) 嘻嘻……
先看一下javascript的代码吧：
div布局： 注意哦，里面的图片我们用js代码生成

<div id="box"><ul><li></li><li></li><li></li><li></li><li></li></ul></div>

css样式

<style type="text/css">*{margin: 0;padding: 0;}ul{list-style: none;}#box{width: 1150px;height: 400px;margin: 50px auto;border: 1px solid red;overflow: hidden;}#box ul{width: 1300px;}#box ul li{width: 240px;height: 400px;float: left;}</style>

要写js代码了。这里封装了一个完整的运动框架（我个人觉得哈，你可以继续完善，不过你要告诉我，我也学习一下！）

/** 实现动画的步骤:1.怎样得到当前的样式  封装一个函数 getStyle()2.步长的计算  用(目标位置 - 当前的样式) / 103. 缓动动画原理:  盒子本身的样式 + 步长(不断变化的)*/
/** css设置透明度，一般在ie中用的是filter:alpha(opacity=0);
而在firefox中，一般就是直接使用opacity:0
*/
// 多个属性的运动框架 以及添加回调函数
function animate(obj,json,fn){  // 目标obj   json 属性：属性值  fn回调函数clearInterval(obj.timer);obj.timer = setInterval(function(){var flag = true;// 用来判断是否停止定时器  // 遍历jsonfor (var attr in json) {  //attr 属性  json[attr]值var curStyle = 0;if (attr == "opacity") {curStyle = parseInt(getStyle(obj,attr)*100);} else{curStyle = parseInt(getStyle(obj,attr));// 获得数值}// 得到步长  目标位置就是json[attr]var step = (json[attr]-curStyle) / 10;step = step > 0 ? Math.ceil(step) :Math.floor(step);// 判断透明度if (attr == "opacity") { // 判断用户有没有输入opacityif ("opacity" in obj.style) { obj.style.opacity = (curStyle + step) / 100;} else{obj.style.filter = "alpha(opacity="+(curStyle +step)+")";}} else if(attr == "zIndex"){obj.style.zIndex = json[attr];} else{obj.style[attr] = curStyle +step +"px";}// 判断是否已经都到了目标位置   只要其中一个不满足条件 就不应该停止定时器if (curStyle != json[attr]) {flag = false;}}// 判断定时器条件 是否该停止了if (flag) {clearInterval(obj.timer)// 当定时器停止后，动画也就结束了.如果有回调函数就执行回调函数if(fn){fn();}}},30);
}// 封装函数 得到属性
function getStyle(obj,attr) {  //  谁的      那个属性if(obj.currentStyle)  // ie 等{return obj.currentStyle[attr];  // 返回传递过来的某个属性}else{return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器}
}

接着我们在js里面引入我们写的框架

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

接下来，写js代码

<script>window.onload = function(){var box = document.getElementById("box");var lis = box.children[0].children;for (var i = 0; i < lis.length;i++) {lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";lis[i].onmouseover = function(){for (var j = 0; j < lis.length;j++) {animate(lis[j],{width:100});}animate(this,{width:800});}lis[i].onmouseout = function(){for (var k = 0; k < lis.length;k++) {animate(lis[k],{width:240});}}}}</script>

好啦，这样就完成了，具体效果你自己动手看看吧。完整的下载地址为
js版本的手风琴效果

写完了js，发现代码量好多啊，看看jquery代码，哦买嘎，切记一定要先引入jQuery的包，再写代码哈！

<script src="jquery-1.11.1.min.js"></script><script>$(function(){$("#box li").each(function(index,ele){$(ele).css("background","url(images/"+(index+1)+".jpg)");}).mouseenter(function(){$(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500);}).mouseleave(function(){$("#box li").stop().animate({width:240},500);});});</script>

精简了好多。
来吧，我们的jQuery版本手风琴效果下载地址

手风琴效果（js版本以及jquery版本）相关推荐

抓娃娃机vue版本和jquery版本
由于公司需求,着手研究H5抓娃娃,从网上找到一份简单的jQuery手机H5抓娃娃机代码.先感谢下最初始分享代码的那位同志.这个分享对我们这些非专职前端的phper来说很关键.虽然简单,但是功能也是都实 ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
动画特效十四：手风琴效果
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看. 在讲解JQuery特效的时候,我介绍过手风琴效果; 这一节我讲解一下在iOS中的实现效果:相对 ...
使用jquery版本的viewer.js图片更新的问题
问题:使用jquery版本的viewer.js时,点击查询之后加载新的图片,但是使用viewer.js查看大图的时候发现还是原来的图片,没有更新图片. HTML <ul id="myp ...
JS/Jquery版本的俄罗斯方块(附源码分析)
转载于 http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言写这个jQuery版本的小游戏的缘由在于我想通过从零到 ...
php js ie8,jquery版本几适应ie8
jQuery1.x版本适应ie8.jQuery1.x的版本兼容IE6.IE7.IE8:而jQuery从2.0版本开始已经不再进行IE低版本(IE6.IE7.IE8)的兼容性处理,因而jQuery2.x ...
IE浏览器对 jquery版本的兼容性支持
IE浏览器存在多种兼容问题掌握技巧,不再害怕 IE浏览器对 jquery版本的兼容性注意: ie9 / ie8 / ie7 -版本的IE浏览器,不兼容jquery中的部分属性方法: 以 jque ...
我可以在同一页面上使用多个版本的jQuery吗？
我正在从事的项目需要在客户的网页上使用jQuery. 客户将插入我们将提供的代码块,其中包括一些<script>元素,这些元素可在<script>创建的<iframe&g ...

手风琴效果（js版本以及jquery版本）

手风琴效果（js版本以及jquery版本）相关推荐

最新文章

热门文章