js以及jquery实现手风琴效果

前端之家收集整理的这篇文章主要介绍了js以及jquery实现手风琴效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近又复习了jQuery的知识,既然jQuery是javascript的一个库。jQuery能做到的事情javascript也能做到。因此用这两种方法实现了图片手风琴效果

按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!(^__^) 嘻嘻……

先看一下javascript的代码吧:

div布局:注意哦,里面的图片我们用js代码生成

Box">

css样式:

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;

}

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

0 ? Math.ceil(step) :Math.floor(step);

// 判断透明度
if (attr == "opacity") { // 判断用户有没有输入opacity
if ("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里面引入我们写的框架

接下来,写js代码

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}); } } } }

好啦,这样就完成了,具体效果你自己动手看看吧。完整的下载地址为

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

精简了好多。 来吧,我们的jQuery版本手风琴效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章