js实现多图展示 鼠标移入图片放大
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多图展示</title>
<style>
ul,li{list-style:none;}
img{border:none;}
#list{400px; margin:30px auto; position:relative;}
#list li{120px; height:100px; display:block; float:left; margin-left:10px; margin-bottom:10px;}
#list li img{100%; height:100%;}
</style>
<script src="js/movement.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
var oList = document.getElementById("list");
var aLi = oList.getElementsByTagName("li");
var iMinZindex = 2;
for(var i=0;i<aLi.length;i++){
aLi[i].style.left = aLi[i].offsetLeft+'px';
aLi[i].style.top = aLi[i].offsetTop+'px';
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position = 'absolute';
aLi[i].style.margin = '0';
}
//缩放
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover = function(){
this.style.zIndex = iMinZindex++;
move(this,{200,height:160,marginLeft:-40,marginTop:-30}); //(200-120)/2=40
}
aLi[i].onmouseout = function(){
move(this,{120,height:100,marginLeft:0,marginTop:0});
}
}
}
</script>
</head>
<body>
<ul >
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/5.jpg"></li>
</ul>
</body>
</html>
附件：
movement.js代码
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var onoff=true;
for(var attr in json){
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-icur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测是否停止
if(icur !=json[attr]){
onoff=false;
}
if(attr=='opacity'){
//IE
obj.style.filter="alpha(opacity='+icur+speed+')";
//firefox
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]= icur+speed+'px';
}
}
if(onoff){
clearInterval(obj.timer);
if(fn){
fn();
}
},30);
}
function getStyle(obj,attr){
//currentStyle针对IE浏览器 getComputedStyle针对火狐浏览器
if(obj.currentStyle){
return currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
效果展示：