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

kaobian

浏览: 212204 次
性别:
来自: 哈尔滨

最近访客更多访客>>

smh0310

tom2139779

smiles_man

lucifer_xtt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

HTML JavaScript

<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>

分享到：

数据库建立索引的原则 | struts2 radio 标签

2011-06-17 18:23
浏览 4941
评论(6)
论坛回复 / 浏览 (4 / 5080)
分类:Web前端
查看更多

6 楼 kaobian 2011-07-22

现在这个效果的所有问题（ie浏览器上的）都解决了，希望大家能够再提出更加好的意见

5 楼 kaobian 2011-07-22

这个是我修改以前的点击报js错误后的一个版本，里面还是有一个不好的地方，连续点击会让这个框变大，请诸位多多指教

4 楼 jackra 2011-06-26

这个事情可以参考下JQUERY对于动画的处理。

3 楼 cheney_love 2011-06-24

kaobian 写道

xfzhi888 写道

呵呵，当层正在展开的时候，同时点击鼠标IE6会抱异常。

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

创建一个数组，来记录不同的鼠标点击对象，然后创建不同的定时器对象，不知道可行不

2 楼 kaobian 2011-06-24

xfzhi888 写道

呵呵，当层正在展开的时候，同时点击鼠标IE6会抱异常。

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

1 楼 xfzhi888 2011-06-24

呵呵，当层正在展开的时候，同时点击鼠标IE6会抱异常。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论