九宫格鼠标悬停放大缩小

Html

Css

   * {
	padding:0;
	margin:0;
}
#ulList {
	position:relative;
	width:366px;
	margin:0 auto;
}
#ulList li {
	list-style:none;
	width:100px;
	height:100px;
	background:#c00;
	border:1px solid black;
	float:left;
	margin:10px;
}

window.onload = function() {
     var oUl = document.getElementById('ulList');
     var aLi = oUl.getElementsByTagName('li');
     var i = 0;
     var initzIndex = 2;
     /*注意这里必须用两个for循环，首先给每个li添加了left和top值，在使他们的position=absolute，如果用一个for就会使所有li重叠在一起*/
     for (i = 0; i < aLi.length; i++) {
         aLi[i].style.left = aLi[i].offsetLeft + 'px';
         aLi[i].style.top = aLi[i].offsetTop + 'px';
     }
     for (i = 0; i < aLi.length; i++) {
         aLi[i].style.position = 'absolute';
         // 因为上面aLi[i].offsetLeft获取的值本身就已经包括了margin的值，所以这里需要将style里margin清零  
         aLi[i].style.margin = '0';

aLi[i].onmousemove = function() {
             this.style.zIndex = initzIndex++;
             startMove(this, {
                 width: 200,
                 height: 200,
                 marginLeft: -50,
                 marginTop: -50
             });
         }
         aLi[i].onmouseout = function() {
             startMove(this, {
                 width: 100,
                 height: 100,
                 marginLeft: 0,
                 marginTop: 0
             });
         }

}
 }

function getStyle(obj, attr) {
     return window.getComputedStyle ? window.getComputedStyle(obj, false)[attr] : obj.currentStyle[attr];
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

九宫格鼠标悬停放大缩小



代码描述：鼠标移动上去的时候放大，离开缩小

鼠标移动上去的时候放大，离开缩小

2

最新

发表评论全部评论

暂时没有评论！

追忆0

2017/9/25 16:34:34

不是吹，纯css就可以实现

西瓜0

2017/9/25 17:00:03

是可以，但是这个兼容ie6,纯Css作不到。

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

追梦人

相关代码

九宫格鼠标悬停放大缩小

最新