首页 > 代码库 > 中心点放大
中心点放大
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#box{
width:366px;
margin: 100px auto;
border: 1px solid #ccc;
height:366px;
}
#ul li{
width:100px;
height:100px;
border:1px solid #000;
background: #ccc;
margin: 10px;
float:left;
}
</style>
<script src="http://www.mamicode.com/move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var oUl=document.getElementById(‘ul‘);
var aLi=oUl.children;
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=‘0‘;
};
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
move(this,{width:200,height:200,marginLeft:-50,marginTop:-50});
this.style.zIndex=‘999‘;
};
aLi[i].onmouseout=function(){
move(this,{width:100,height:100,margin:0});
this.style.zIndex=‘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>
中心点放大
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。