html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格中心放大</title>
<style>
*{
margin: 0;
padding: 0;
}
#ul1{
position: relative;
width: 600px;
list-style: none;
margin: 0 auto;
}
#ul1 li{
width: 180px;
height: 180px;
background-color: #ccc;
border:solid 5px rgba(205,116,196,0.7);
float: left;
margin: 5px;
overflow: hidden;
}
#ul1 li img{
width: 100%;
}
h2{
text-align: center;
margin: 10px;
text-shadow: 0px 2px 1px rgba(205,116,196,0.7);
color: blue;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oUl=document.getElementById("ul1");
var aLi=document.getElementsByTagName("li");
var MinZindex=2;
//布局转换，把浮动转换为绝对定位，防止重叠所以使用两次for循环
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=MinZindex++;
startMove(this,{width:320,height:320,marginLeft:-70,marginTop:-70});
}
aLi[i].onmouseout=function(){
startMove(this,{width:180,height:180,marginLeft:0,marginTop:0});
}
}
}
</script>
</head>
<body>
<h2>领哥做网页</h2>
<ul id="ul1">
<li><img src="7.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="x.jpg" alt=""></li>
<li><img src="8.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
<li><img src="1.1.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
</body>
</html>move.js代码如下：
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//运动函数
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true;//判断都到达目标位置
for(var attr in json){
//1、取当前值
var iCur=0;
if (attr=='opacity') {
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=parseInt(getStyle(obj,attr));
}
//2、计算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//3、判断是否到达目标点
if (iCur!=json[attr]) {
bStop=false;
}
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+iCur+iSpeed+')';
obj.style.opacity=(iCur+iSpeed)/100;
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},30);
}成品展示如下：
