论坛首页 → Web前端技术论坛 →

js 特效 鼠标点击为止弹出div 由中心像两侧扩大

浏览 5080 次
锁定老帖子 主题：js 特效 鼠标点击为止弹出div 由中心像两侧扩大
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
  • kaobian
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 120
  • 来自: 哈尔滨
   发表时间：2011-06-17   最后修改：2011-06-18

<html>
<head>
<title>无标题文档</title>
<script language="javascript">
     var step = 1;
     var temp  ;
     var div ;
     
     function promptdiv(event){
           
            div = document.getElementById('mydiv');
            if(step == 1){
                    div.style.marginLeft = event.offsetX  ;
                    div.style.marginTop  = event.offsetY  ;

                    div.style.width      =  '0px';
                    div.style.height     =  '0px';
            }
           
            if(div.style.marginLeft.length == 0 || div.style.marginTop.length == 0){
                    div.style.marginLeft = event.offsetX  ;
                    div.style.marginTop  = event.offsetY  ;


                     
            }             
            if(step <=50){
                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';
                 
                step = step +1 ;
            }
            temp = setTimeout('promptdiv()',10);
           
            if(step ==50){
                step = 1;
                clearTimeout(temp);
            }
       }
     
     
</script>

</head>

<body  onclick="promptdiv(event);">
 
<div id="mydiv" style="background-color:#99FF00;width:0px;height:0px; position:absolute;"></div>
 
</body>
</html>
返回顶楼
         
  • xfzhi888
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 60
  • 来自: 上海
   发表时间：2011-06-24  
呵呵，当层正在展开的时候，同时点击鼠标IE6会抱异常。
返回顶楼
          回帖地址
0 请登录后投票
  • kaobian
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 120
  • 来自: 哈尔滨
   发表时间：2011-06-24  
xfzhi888 写道
呵呵，当层正在展开的时候，同时点击鼠标IE6会抱异常。


是 这样的，我现在还没想出如何解决这个问题，让这个东西好用点。
返回顶楼
          回帖地址
0 请登录后投票
  • cheney_love
  • 等级: 一星会员
  • 性别:
  • 文章: 266
  • 积分: 190
  • 来自: 上海
   发表时间：2011-06-24   最后修改：2011-06-24
kaobian 写道
xfzhi888 写道
呵呵，当层正在展开的时候，同时点击鼠标IE6会抱异常。


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

创建一个数组，来记录不同的鼠标点击对象，然后创建不同的定时器对象，不知道可行不
返回顶楼
          回帖地址
0 请登录后投票
  • jackra
  • 等级: 初级会员
  • 性别:
  • 文章: 350
  • 积分: 30
  • 来自: 北京
   发表时间：2011-06-26  
这个事情可以参考下JQUERY对于动画的处理。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics