日期:2014-05-16  浏览次数:20379 次

js鼠标点击位置 弹出层由中心向四周缓慢扩大

<html>
<head>
<title>无标题文档</title>
<script language="javascript">
??????
??? var level = 1;
??? var div????? ;
??? var timeout? ;??? ?

??? document.onclick = function (event){
??? ??? var e???? = event || window.event ;
??????? div = document.getElementById('mydiv');
??? ??? level = 1;
??? ??? if(level === 1){
??? ??? ??? div.style.marginLeft = e.clientX;
??? ??? ??? div.style.marginTop? = e.clientY;?
??? ??? ??? div.style.width????? =? '0px';
??? ??? ??? div.style.height???? =? '0px';
??? ??? ??? clearTimeout(timeout);
??? ??? }

??? ??? var step = function (){?
??? ??? ??? var width? =? parseInt(div.style.width.substring(0,div.style.width.length -2)) ;
??? ??? ??? var height =? parseInt(div.style.height.substring(0,div.style.height.length -2));
??? ??? ???
??? ??? ??? var left?? =? parseInt(div.style.marginLeft.substring(0,div.style.marginLeft.length-2));
??? ??? ??? var top??? =? parseInt(div.style.marginTop.substring(0,div.style.marginTop.length-2));
??? ??? ???
??? ??? ??? div.style.width? = (width +? 4 ) + 'px';
??? ??? ??? div.style.height = (height + 2 ) + 'px';
??? ??? ??? ?
??? ??? ??? div.style.marginLeft = (left - (width+4) /2 +width/2)? + 'px';
??? ??? ??? div.style.marginTop? = (top? - (height+2)/2 +height/2) + 'px';
??? ??? ??? if(level <= 50){ ??? ?
??? ??? ??? ??? level = level +1 ;
??? ??? ??? ??? timeout= setTimeout(step,10);
??? ??? ??? }
??? ???
??? ??? }
??? ?? timeout = setTimeout(step,10);
??? }
?
</script>

</head>

<body>
?
<div id="mydiv" style="background-color:#99FF00;width:0px;height:0px; position:absolute;"></div>
?
</body>
</html>

1 楼 xfzhi888 2011-06-24  
呵呵,当层正在展开的时候,同时点击鼠标IE6会抱异常。
2 楼 kaobian 2011-06-24  
xfzhi888 写道
呵呵,当层正在展开的时候,同时点击鼠标IE6会抱异常。


是 这样的,我现在还没想出如何解决这个问题,让这个东西好用点。
3 楼 cheney_love 2011-06-24  
kaobian 写道
xfzhi888 写道
呵呵,当层正在展开的时候,同时点击鼠标IE6会抱异常。


是 这样的,我现在还没想出如何解决这个问题,让这个东西好用点。

创建一个数组,来记录不同的鼠标点击对象,然后创建不同的定时器对象,不知道可行不
4 楼 jackra 2011-06-26  
这个事情可以参考下JQUERY对于动画的处理。
5 楼 kaobian 2011-07-22  
这个是我修改以前的点击报js错误后的一个版本,里面还是有一个不好的地方,连续点击会让这个框 变大,请诸位 多多指教
6 楼 kaobian 2011-07-22  
现在这个效果的所有问题(ie浏览器上的)都解决了,希望大家能够再提出更加好的意见