改良后的《js鼠标点符号击位置 弹出层由中心向四周缓慢扩大》

改良后的《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 楼 kaobian 2011-07-22  
这个帖子我之前在论坛上发过,当时里面有一些问题,现在把这个问题解决了,希望大家再多多指教,带着诚挚感恩的心对每位看过我博客的人说声thanks
2 楼 strive_2017 2011-08-05  
这个很好啊。但可以把注释写上吗?我入软件这行不久。很多都不懂额。顶你~~~~改良后的《js鼠标点符号击位置 弹出层由中心向四周缓慢扩大》 改良后的《js鼠标点符号击位置 弹出层由中心向四周缓慢扩大》