手风琴：
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{list-style-type: none;margin: 0;padding: 0;}
#box{position: relative;margin: 50px auto;border: 1px solid black;
700px;height: 300px;overflow: hidden;
}
#box li{500px;height: 300px;position: absolute;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var aLi=oBox.children;
var w=50;
for(var i=1;i<aLi.length;i++){
aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+'px';
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(i<=this.index){
move(aLi[i],{left:w*i});
//aLi[i].style.left=w*i+'px';
}else{
//aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+'px';
move(aLi[i],{left:oBox.offsetWidth-w*(aLi.length-i)}) ;
}
}
};
}
}
</script>
</head>
<body>
<ul id="box">
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
</ul>
</body>
</html>
引进的move.js为：
/**
* Created by 潘泽慧 on 2016/11/7.
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
function move(obj, json, options) {
clearInterval(obj.timer);
options = options || {};
options.time = options.time || 500;
options.easeing = options.easeing || 'ease-out';
var dis = {};
var start = {};
for (var name in json) {
start[name] = parseFloat(getStyle(obj, name));
dis[name] = json[name] - start[name];
}
var count = Math.floor(options.time / 30);
var n = 0;
obj.timer = setInterval(function () {
n++;
for (var name in json) {
switch (options.easeing) {
case 'linear':
var a = n / count;
var cur = start[name] + dis[name] * a;
break;
case 'ease-in':
var a = n / count;
var cur = start[name] + dis[name] * a * a * a;
break;
case 'ease-out':
var a = 1 - n / count;
var cur = start[name] + dis[name] * (1 - a * a * a);
}
if (name == 'opacity') {
obj.style.opacity = cur;
obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
} else {
obj.style[name] = cur + 'px';
}
}
if (n == count) {
clearInterval(obj.timer);
options.fn && options.fn();
}
}, 30);
}
多图片中心点放大：
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{list-style-type: none;margin: 0;padding: 0;}
#box ul li{100px;height:100px;float: left;margin:10px;background: #ececec;}
#box{366px;height: 366px;margin: 100px auto;border: 1px solid black;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var aLi=document.getElementsByTagName('li');
var arr=[];
for(var i=0;i<aLi.length;i++){
arr[i]={
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
}
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.left=arr[i].left+'px';
aLi[i].style.top=arr[i].top+'px';
aLi[i].style.margin="0px";
}
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
// this.style.width='200px';
// this.style.marginLeft='-50px';
// this.style.marginTop='-50px';
// this.style.height='200px';
move(this,{200,marginLeft:-50,marginTop:-50,height:200},{time:2000,easeing:'ease-in'});
this.style.index=999;
};
aLi[i].onmouseout=function(){
move(this,{100,margin:0,height:100});
this.style.index=0;
}
}
}
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>