手风琴效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
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;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script src="sport2.js"></script>
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
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++) {
startMove(lis[j], 100, "width");
}
startMove(this, 800, "width");
}
lis[i].onmouseout = function() {
for (var j = 0; j < lis.length; j++) {
startMove(lis[j], 240, "width");
}
}
}
</script>
sport.js
function startMove(obj,target,attr,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var current = 0;
if( attr == "opacity" ){
current = parseFloat( getStyle(obj,attr) ) * 100;
}else{
current =parseInt( getStyle(obj,attr) ) ;
}
var speed = (target-current)/10;
speed = speed>0?Math.ceil(speed) : Math.floor(speed);
if( current == target ){
clearInterval(obj.timer);
if( callback ){
callback();
}
}else{
if( attr == "opacity" ){
obj.style[attr] = (current + speed) / 100;
}else{
obj.style[attr] = current + speed + "px";
}
}
},30)
}
function getStyle(obj,attr){
if( window.getComputedStyle ){
return window.getComputedStyle(obj,false)[attr];
}else{
return obj.currentStyle[attr];
}
}
sport2.js
function startMove(obj,target,attr,callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var current = parseFloat(getStyle(obj,attr));
var speed = 0;
if (attr === "opacity") {
speed = target - current > 0 ? 0.1: -0.1;
} else {
speed = (target - current)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
if (current === target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
} else {
if (attr === "opacity") {
obj.style[attr] = current + speed
} else {
obj.style[attr] = current + speed + "px";
}
}
},20);
}
function getStyle(obj,attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj,false)[attr];
} else {
return obj.currentStyle[attr];
}
}
附加图片