介绍 & lt; div id=癰ox"比;
& lt; ul>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt;/ul>
& lt;/div> & lt;风格类型=拔谋?css"比;
* {
保证金:0;
填充:0;
}
ul {
list-style:没有;
}
#箱{
宽度:1150 px;
身高:400 px;
保证金:50 px汽车;
边界:1 px固体红;
溢出:隐藏;
}
#箱ul {
宽度:1300 px;
}
李#箱ul {
宽度:240 px;
身高:400 px;
浮:左;
}
& lt;/style> /*
*实现动画的步骤:
1.怎样得到当前的样式封装一个函数getStyle ()
2.步长的计算用(目标位置,当前的样式)/10
3.缓动动画原理:盒子本身的样式+步长(不断变化的)
*//*
* css设置透明度,一般在ie中用的是过滤器:α(不透明度=0);
而在firefox中,一般就是直接使用透明度:0
*///多个属性的运动框架以及添加回调函数
函数动画(obj、json、fn){//目标obj json属性:属性值fn回调函数
clearInterval (obj.timer);
obj。计时器=setInterval(函数(){
var国旗=true;//用来判断是否停止定时器//遍历json
(var attr json) {//attr属性json (attr)值
var curStyle=0;
如果(attr==皁pacity") {
curStyle=方法(getStyle (obj, attr) * 100);
其他}{
curStyle=方法(getStyle (obj, attr));//获得数的值
}//得到步长目标位置就是json (attr]
var一步=(json (attr] -curStyle)/10;
一步=一步比;0,# 63;Math.ceil(步骤):Math.floor(步骤);//判断透明度
如果(attr==皁pacity"){//判断用户有没有输入的不透明度
如果(“opacity"在obj.style) {
obj.style。不透明度=(curStyle +一步)/100;
其他}{
obj.style。过滤器=唉?不透明度=? (curStyle +步骤)+“)“;
}
}else if (attr==皕Index") {
obj.style。zIndex=json (attr);
其他}{
obj。风格(attr]=curStyle +一步+“px";
}//判断是否已经都到了目标位置只要其中一个不满足条件就不应该停止定时器
如果(curStyle !=json (attr]) {
国旗=false;
}
}//判断定时器条件是否该停止了
如果(国旗){
clearInterval (obj.timer)//当定时器停止后,动画也就结束了。如果有回调函数就执行回调函数
如果(fn) {
fn ();
}
}
},30);
}//封装函数得到属性
函数getStyle (obj, attr){//谁的那个属性
如果(obj.currentStyle)//ie等
{
返回obj.currentStyle [attr);//返回传递过来的某个属性
}
其他的
{
返回window.getComputedStyle (obj, null) [attr);//w3c浏览器
}
} & lt;脚本https://www.yisu.com/zixun/src=" animate.js "> & lt; script>
窗口。onload=function () {
var盒=. getelementbyid (“box");
var lis=box.children[0]定格;
(var=0;我& lt;lis.length;我+ +){
lis[我].style。backgroundImage=皍rl(图片/? (i + 1) +“jpg)“;
lis[我]。onmouseover=function () {
(var j=0;j & lt;lis.length; j + +) {
动画(lis) [j],{宽度:100});
}
动画(这个,{宽度:800});
}
lis[我]。onmouseout=function () {
(var k=0;k & lt;lis.length; k + +) {
动画(lis) [k]{宽度:240});
}
}
}
}
& lt;/script> & lt;脚本https://www.yisu.com/zixun/src=" jquery-1.11.1.min.js ">
这篇文章主要讲解了js以及jquery实现手风琴效果的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
最近又复习了jquery的知识,既然jquery是javascript的一个库.jQuery能做到的事情javascript也能做的到。因此用这两种方法实现了图片手风琴效果。
按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!
先看一下javascript的代码吧:
注意哦,里面的图片我们用js代码生成
要写js代码了。这里封装了一个完整的运动框架(我个人觉得哈,你可以继续完善,不过你要告诉我,我也学习一下!)
接着我们在js里面引入我们写的框架
接下来,写js代码
好啦,这样就完成了,具体效果你自己动手看看吧。完整的下载地址为js版本的手风琴效果
写完了js,发现代码量好多啊,看看jquery代码,哦买嘎,切记一定要先引入jquery的包,再写代码哈!
