`
kaobian
  • 浏览: 211378 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类
最新评论

改良后的《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
0
分享到:
评论
2 楼 strive_2017 2011-08-05  
这个很好啊。但可以把注释写上吗?我入软件这行不久。很多都不懂额。顶你~~~~ 
1 楼 kaobian 2011-07-22  
这个帖子我之前在论坛上发过,当时里面有一些问题,现在把这个问题解决了,希望大家再多多指教,带着诚挚感恩的心对每位看过我博客的人说声thanks

相关推荐

    弹出层改良版的popus.js

    "弹出层改良版的popus.js" 标题表明这是一个专门针对弹出层进行优化的JavaScript库,解决了原有弹出层位置不准确的问题,确保无论用户如何滚动页面,弹出层始终位于屏幕中央。 首先,让我们深入了解一下弹出层的...

    Jquery兼容弹出层

    总结来说,tipswindown经过改良后的弹出层解决方案,以其丰富的功能和良好的兼容性,为Web开发者提供了一种强大的工具,能够提升用户体验,增强网页的交互性。无论是简单的提示还是复杂的页面操作,都可以借助这个...

    WOW.js 改良版 支持上下滑动触发效果

    WOW.js 是一款流行的JavaScript库,由Matteo Spinelli开发,主要用于实现网页上的滚动动画效果。原版的WOW.js主要关注于当用户向下滚动页面时,元素进入视口(viewport)时触发动画。然而,这个改良版的WOW.js引入了...

    行业文档-设计装置-改良的笔记本鼠标.zip

    1. 笔记本鼠标的局限性:传统的笔记本内置触摸板或外部USB/蓝牙鼠标虽然提供了基本的移动和点击功能,但在长时间使用后,可能会导致手部疲劳,尤其对于频繁进行精确操作的用户,如设计师、程序员等。 2. 改良的目标...

    jQuery点击小图显示大图改良版代码

    "jQuery点击小图显示大图改良版代码"是一个实用的JavaScript插件,利用jQuery库来实现这一功能,使得用户在网页上点击小图后,能够无缝地查看放大的高清大图。这一技术提高了用户体验,特别是在移动设备上,用户可以...

    改良后的boxover

    "改良后的boxover"是一个关于前端开发中交互效果优化的主题,主要涉及到JavaScript的源码实现和自定义工具的使用。Boxover通常指的是在鼠标悬停时出现的提示框,用于提供额外的信息或功能。在这个项目中,开发者对...

    改良后的xlistview

    标题中的“改良后的xlistview”指的是对原版XListView进行了优化或增强,以解决原组件可能存在的问题或增加新的特性。 原版XListView是开源项目,由开发者们共同维护和更新,旨在提供一个简单易用的列表组件,可以...

    电子政务-改良结构的电器插头的弹片.zip

    在这种情况下,压缩包内有一个名为“行业分类-电子政务-改良结构的电器插头的弹片.pdf”的文件,这很可能是一个详细的报告或技术规格书,详细阐述了改良后的电器插头弹片的设计、测试结果、可能的应用场景以及对电子...

    wow.js.zip

    1. **WOW.js**:这是一个轻量级的JavaScript库,由Matteo Spinelli创建,它与Animate.css库配合使用,能够轻松地在网页中实现基于滚动的动画效果。WOW.js的核心功能是检测元素何时进入浏览器的视口,并触发预定义的...

    jquery 弹出框 (类似于CONFIRM这样的提示框)

    资源还是一如既往的好,基本上拿过去就能直接用,这个是我们项目中用到的,因为需要统一风格,所以把一些弹出框都自己重写了,这个是有类似于WINDOW自带的删除提示框,不过是改良版的,功能基本和那个一样。

    js验证框架validator(改良过)

    在IT行业中,JavaScript是一种广泛使用的前端编程语言,用于构建交互性强、动态的网页应用。而Validator框架则是JavaScript中用于表单验证和数据校验的重要工具。这个“js验证框架validator(改良过)”是针对原始...

    14个改良的TButton组件

    2. **状态反馈**:这些改良组件可能增加了状态指示功能,如加载中、禁用、高亮等状态,以更好地向用户传达按钮当前的状态。 3. **鼠标悬停效果**:当鼠标光标悬停在按钮上时,可能会有动态效果,如改变颜色、大小或...

    ES6所改良的javascript“缺陷”问题

    ES6(ECMAScript 2015)是JavaScript的一次重大更新,它引入了许多新特性来改进JavaScript语言,解决ES5版本中存在的许多问题和不足。ES6的出现,让JavaScript变得更为强大和易于开发。接下来,我们将详细讨论ES6...

    win8鼠标指针

    3. 在弹出的“鼠标属性”窗口中,点击“指针”选项卡。 4. 在这里,用户可以选择“方案”,浏览并选择刚刚解压缩的酷黑指针文件。 5. 点击“应用”和“确定”按钮,新的指针样式就会立即生效。 需要注意的是,安装...

    改良后的jQuery+WEUI

    【jQuery+WEUI的改良与应用】 在移动互联网飞速发展的今天,优秀的前端框架对于提升用户体验、简化开发流程起着至关重要的作用。标题中的“改良后的jQuery+WEUI”正是一种针对WEUI进行优化和扩展的实践,旨在解决...

    统计方法的改良---改良t检验法

    ### 统计方法的改良——改良t检验法 #### 概述 在统计分析领域,t检验法是一种常用的假设检验方法,主要用于比较两个样本平均数之间的差异是否具有统计学意义,尤其是在不知道总体标准偏差的情况下。然而,传统的t...

    无刷新聊天室改良版js+xml+php

    【标题】"无刷新聊天室改良版js+xml+php"是一个基于JavaScript、XML和PHP技术构建的实时聊天室系统,它的主要特点是实现了页面无刷新的通信功能,为用户提供流畅、实时的聊天体验。这种技术在现代Web应用中非常常见...

    jquery坦克大战改良版

    jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版jquery坦克大战改良版...

    pdf 智能书签JS

    将下载的文件解压缩,把其中的“bookmark_page.js”文件复制到“c:\Program Files\Adobe\Reader 8.0\Reader\Javascripts”文件夹下,然后启动Adobe Acrobat Reader软件,依次点击“编辑→首选项→Javascript”,...

    不同改良剂对不同含砂率粉土改良性质研究

    通过人工室内配制不同含砂率(10%、20%、40%)粉土,对其进行改良试验,研究在不同改良剂(石灰+水玻璃、石灰+粉煤灰)、不同配比作用下3种含砂率粉土的改良效果,研究结果表明:随着含砂率的增加,无论是素土还是改良土,其...

Global site tag (gtag.js) - Google Analytics