`

html元素永远点不到···

    博客分类:
  • JS
阅读更多
function btn_move(el, mouseLeft, mouseTop){
    var leftRnd = (Math.random()-0.5)*20;
    var topRnd = (Math.random()-0.5)*20;
    var btnLeft = mouseLeft+(leftRnd>0?100:-100)+leftRnd;
    var btnTop = mouseTop+(topRnd>0?30:-30)+topRnd;
    btnLeft = btnLeft<100?(btnLeft+window.innerWidth-200):(btnLeft>window.innerWidth-100?btnLeft-window.innerWidth+200:btnLeft);
    btnTop =  btnTop<100?( btnTop+window.innerHeight-200):(btnTop>window.innerHeight-100?btnTop-window.innerHeight+200:btnTop);
    el.style.position = 'fixed';
    el.style.left = btnLeft+'px';
    el.style.top = btnTop+'px';
}

function over_btn(e){
    if(!e){
        e = window.event;
    }
    btn_move(this, e.clientX, e.clientY);
}

document.getElementById('gbqfba').onmouseover = over_btn;

 

 

分享到:
评论

相关推荐

    css入门笔记

    将背景图等比放大,直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大;直到背景图片碰到某个边缘位置 5.背景图片固定 作用:将普片固定在网页在某个位置,一直在可视区域内,不会随着 ...

    用CSS中的map标签制作单图多区域点击的示例

     area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面...

    移动端html5 meta标签的神奇功效

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?...

    Browser-games

    使用类名将帮助您将CSS重用于其他HTML元素,这将减少浏览器上的数据加载量并提供代码的可读性。 在所有使用CSS的方法中,浏览器都有优先级,当属性发生冲突时,浏览器应优先选择。 直接使用像素值不是一个好主意,...

    element-constructors:关于如何为Element、HTMLElement等实现构造函数的一些想法

    这是一种展示如何为 HTML 元素构建构造函数层次结构的方法,同时保持许多不变量。 术语:在下文中,我使用“ X自己的实例”来表示obj.constructor === X对象,作为与“ X实例”的距离,这意味着对象的obj ...

    javascript入门笔记

    1、采用HTML元素事件执行JS代码 事件 : 1、onclick 当元素被点击时执行的操作 ex: 当按钮被点击时,在控制台中输出 Hello World );"&gt; 2、将JS脚本编写在 [removed][removed] 并嵌入在HTML文档的任何位置 ...

    jquery插件使用方法大全

    以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。 代码 $(document).ready(function() { $...

    dialogue_cartoon:关于通过代码完全安慰自己认为自己太平凡的人的漫画

    我在动画片中的答复以及动画片中的每个元素都是由HTML,CSS和javascript编写的,因为我将学习Data Visualization类,并且我想练习这些表达式,并用它们来表达自己的想法。 对我来说,如果您仅显示人员数据却没有...

    超级有影响力霸气的Java面试题大全文档

     ArrayList 和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插入数据慢,...

    sakura:Je以Bootstrap 4,Font Awesome 5,Algolia即时搜索等功能烤制的Jekyll主题!

    我将这个Jekyll模板拼凑在一起,因为我永远找不到一个模板,该模板确实/拥有我想要的东西,并且没有很多我不想要的东西。 我还努力使事情变得尽可能简单,同时尽我所能以适当的详细信息记录尽可能多的细节,以便...

    VC之美化界面篇本文专题讨论VC中的界面美化,适用于具有中等VC水平的读者。读者最好具有以下VC基础:

    而且,更要命的是,操作系统,包括别的应用程序并不认识你的界面元素,这才是真正悲哀的。认识这些界面的只有你的程序,图2中的按钮永远只是一个无用的框子。 有了Windows,一切都好办了,Windows将诸如按钮、菜单...

    JAVA自学之路

    但是如果把时间花在spring的各种细节的研究上,花在研究中国企业应用不广泛地的spring mvc上,这个精力就太浪费了,而且学习的积极性会受到打击,谁愿意整天泡在细节的蜘蛛网中挣扎不出来呢?谁愿意天天经历风雨却...

    flash shiti

    2.选定舞台上的元素,并将选定元素拖到库面板上 3.填写Convert to Symbol 对话框,并点击确定" 10. 某电影中,只有一个layer1,其上放置一个有两个元件(test1 和test2)组合成的组合体, 选择这个组合体执行打散Ctrl...

    java 面试题 总结

    ArrayList和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插入数据慢,Vector...

    Stream Locker-crx插件

    任何烦人的弹出窗口都会被自动阻止,并且在您观看视频后(如果与HTML5兼容)就会被Stream Locker捕获并加载到您浏览器的轻量级本机播放器中,在新页面中(播放器除外),没有任何其他元素,并且具有一组直观的键盘...

    保存页面我们「Save Page WE」-crx插件

    保存的项目保存基本项目-保存以下项目:•HTML元素•HTML图像文件(当前显示)•CSS样式表•CSS图像文件(当前显示)•CSS字体文件(此浏览器使用)保存标准项目-保存基本项目项目和这些项目:•HTML图像文件(全部...

    HTML5跨屏框架ZUI 1.9.1

    优化了右键菜单上的项目,当一些条目在特定情况下不可用时不会显示,例如当光标处于最后一行时不会出现“向下合并单元格”菜单项;优化了在表格中插入表格的交互,支持对嵌套表格进行编辑;修复了有时在单元格上点击...

    JAVA面试题最全集

    如何取得从1970年到现在的毫秒数 如何获取某个日期是当月的最后一天 如何格式化日期 5.数组和集合 6.文件和目录(I/O)操作 如何列出某个目录下的所有文件 如何列出某个目录下的所有子目录 判断一个文件或...

Global site tag (gtag.js) - Google Analytics