调用jQuery的animate动画函数,能实现动画变形,以此实现动画效果。
window.onload = function () {
//需求:鼠标放入到li中该盒子变宽,其他的盒子变窄。移开大盒子,回复原样。
//步骤:
//1.给li添加背景
//2.绑定onmouseover事件,鼠标放入到li中该盒子变宽,其他的盒子变窄
//3.移开大盒子,回复原样
var div = document.getElementsByTagName("div")[0];
var liArr = div.getElementsByTagName("li");
//1.给li添加背景
for(var i=0;i<liArr.length;i++){
liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
//2.绑定onmouseover事件,鼠标放入到li中该盒子变宽,其他的盒子变窄
liArr[i].onmouseover = function () {
//排他思想
for(var j=0;j<liArr.length;j++){
//引用框架实现宽度变窄
animate(liArr[j],{"width":100});
}
//剩下他自己
animate(this,{"width":800})
}
}
//3.移开大盒子,回复原样
div.onmouseout = function () {
for(var j=0;j<liArr.length;j++){
//引用框架实现宽度变窄
animate(liArr[j],{"width":240});
}
}
}
思路:
调用JS的for循环为每个li节点增加背景图片属性,并且为该li节点绑定一个onmouseover方法,在方法中先用for循环将所有元素遍历一遍,width设为100,之后将自己的width设为800,便能实现手风琴效果。
鼠标移开,用mouseout方法检测到,再用for循环遍历,将所有宽度设为正常值。