用无序列表进行布局,然后用块级元素div进行结合使用
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;
/*background-image: url(images/1.jpg);*/
}
div ul {
width: 1300px;
}
html代码段:
li里面没有任何内容,到时候用js代码进去创建元素,简单明了
js代码段:
下面的animate函数以打包封装,对于一般动态特性的动画基本可以引用,看实际情况
//找人
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;
//动态添加背景图
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//鼠标经过当前li 当前li的宽度变为800 其他li的宽度变为100
lis[i].onmouseover = function () {
//干掉所有人 其他li的宽度变为100 而且是动画效果
for (var j = 0; j < lis.length; j++) {
animate(lis[j], {"width": 100});
}
//留下我自己 当前li的宽度变为800
animate(this, {"width": 800});
};
}
//离开后 所有的li宽度变会240
box.onmouseout = function () {
for (var i = 0; i 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
console.log("代码在运行");
if (leader !== target) {//当前这个属性还没有到达目标值
flag = false;
}
}
if (flag) {//如果此时仍然是true说明所有的都到目标了
clearInterval(obj.timer);
}
}, 15);
}
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
如果大家对此代码有如何高见或者发现哪里不对的地方,请给我留言,我会及时改正,以免然给别人进入误区,感谢老铁!!!