`
zyshaw
  • 浏览: 53124 次
  • 性别: Icon_minigender_1
  • 来自: 加興
文章分类
社区版块
存档分类
最新评论

div 随机移动

 
阅读更多
<div id="ad" style="position:absolute;width=100;height=80">
<a href="#" target="_blank">
<img src="ad.jpg" border="0" width=100 height=90>
</a></div>
  <script>
  var x = 50,y = 60
  var xin = true, yin = true
  var step = 1   //这里设置移动步长,越小每次移动越短
  var delay = 10   //这里设置移动速度,越小越快
  var obj=document.getElementById("ad")
  function floatAD() {
     var L=T=0
     var R= document.body.clientWidth-obj.offsetWidth
     var B = document.body.clientHeight-obj.offsetHeight
     obj.style.left = x + document.body.scrollLeft
     obj.style.top = y + document.body.scrollTop
     x = x + step*(xin?1:-1) 
     if (x < L) { xin = true; x = L}
     if (x > R){ xin = false; x = R}
     y = y + step*(yin?1:-1)
     if (y < T) { yin = true; y = T }
     if (y > B) { yin = false; y = B }
  }
  var itl= setInterval("floatAD()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)}
  </script>


分享到:
评论

相关推荐

    jQuery interface.js网页DIV 拖动插件应用示例.rar

    分享一款来自国外的jquery层拖动插件,可拖动网页上的DIV任意移动位置,自动感知并自动归位,好像有磁性一样会吸咐DIV到自动归位,拖动效果操作自然。使用了jquery的一款插件interface.js,兼容性表现不错。

    javascript实现10个球随机运动、碰撞实例详解

    效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹 思路: 1、10个小球是10个div; 2、碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(负值),小球碰窗口边界时,vx vy分别乘以...

    snake-game:使用HTML,CSS和Javascript重新创建的经典诺基亚移动Snake游戏。 使用基于div的网格系统渲染游戏板

    使用基于div的网格系统渲染游戏板。 特征 可以使用开始按钮开始游戏 如果蛇撞到棋盘的边界或自己撞到了棋盘,则游戏结束。 在两者之间玩或暂停游戏 蛇吃食物后的动态得分和水平计算。 每次升级后加快速度。 可以...

    【JavaScript源代码】js实现弹幕墙效果.docx

    3.初步的想法应该就是当在输入框输入你要发送的内容,点击发送按钮,在墙上会新建一个div来包含这条弹幕内容,再给这个div相应的移动动画class;  4.弹幕颜色随机,单条弹幕之间有间隔;  取随机颜色这里用的是 ...

    js轨迹回放,js画曲线,js运动轨迹模拟,js移动轨迹

    纯js实现鼠标移动轨迹线的绘制,回车轨迹回放。 操作说明:在窗口中任意位置点击鼠标,程序将在两点间画线; 并通过拟合曲线算法,对曲线平滑处理; 回车将进行轨迹回放! 经测试IE,FIREFOX都可运行! 工作原理:在...

    ASP ISchool随机抽题考试系统

    1.整理优化了全部代码,操作成功提示改为弹出DIV,后台表单区域加入了帮助语句 2.将系统设置存储到了数据库 3.修复系统存在的数个BUG 4.改良抽题算法 5.改良系统安装文件,增加数个权限检查点 V3.4Sp1(20100816) ...

    javascript实现贪吃蛇游戏

    食物用一个框表示,初始时和蛇一样其位置是随机产生的。蛇和食物的坐标用&lt;div&gt;和的绝对位置表示。 算法的关键是当蛇移动到新的位置后,判断前述的三种情况,做出相应的处理。而二维数组 Map[][] 就是判断的依据。...

    s2招聘特效制作项目

    DIV套表格布局页面 2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 4、向上、向左滚动的信息(利用marquee跑马灯实现) 5、最热招聘(本页内链接) 6、页面打开时,弹出广告窗口 7、...

    jquery.shuffle-images—鼠标悬停更改图片内容

    当鼠标移动到图片所在的范围之内的时候,div容器内的图片会随机进行切换显示。 这样的效果适合狭小的空间内展示多张图片,用户鼠标在其中切换的适合可以看到所有图片。 此插件很适合节省你网页的宝贵地方,...

    jquery-sketchpad:Odin项目的入门JavascriptJQuery项目

    jquery-sketchpad Odin项目的入门Javascript / JQuery项目。... 当鼠标悬停它们时,将&lt;div&gt;更改为随机颜色。 使鼠标在网格上移动时留下轨迹。 提供一种方法来更改&lt;div&gt;的大小,同时保持正方形大小不变。

    etch-a-sketch:奥丁项目课程的蚀刻素描项目

    目的是做到这一点,以便当光标在div上移动时,颜色会改变,就像您在etch-a-sketch上绘制一样。 最初,我可能只会将其变为黑色,然后将添加用于随机颜色的功能,而且还将使自定义可用于着色的div数量成为可能。范围...

    D3licious:我学习D3

    第1.1课:根据随机数据集拉伸div。 第1.2课:开始使用SVG元素。 第1.3课:重新学习第一课,添加标签和与数据相关的填充。 第1.4课:从随机的二维数据集制作散点图。 第2章:恒动。 第2.1课:彩色元素向随机方向移动...

    takehome-test:ShopPad开发人员候选人的实地测试

    Takehome测试(全栈) 概述 这是针对在ShopPad上申请全职开发人员职位的候选人的实地测试。... 单击“随机播放”按钮时,添加JS以将随机随机播放应用于div元素。 您可以自行决定使用第三方库。 后端 对于测

    Roll M-crx插件

    当您移动鼠标时,它将突出显示适合您的候选对象,当您满意时,它已找到要滚动的表,单击,它将从表中选择一个随机条目; 您可以从弹出对话框中随意滚动多次,而无需再次选择。 或者,如果找不到表格(因为它没有标记...

    jquery 3D 标签云示例代码

    相关选项 zoom: 90 初始的缩放度 min_zoom: 25 max_zoom: 120 zoom_factor: 2 – 鼠标滚轮的缩放速度 rotate_factor: -0.45 – 鼠标移动时球体旋转的数量。正数将反向旋转 fps: 10 – 定义每秒动画更新的次数 ...

    js实现贪吃蛇小游戏(容易理解)

    话不多说,请看代码: ... &lt;div id=container&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; 第一步:初始化地图,创建蛇圈。 第二步:创建蛇,随机生产食物。 第三步:让蛇移动起来。 第四步:通过js绑定键盘事件,控制蛇移动

    cti-color-picker:带有Hammer.js的简约,移动触摸友好的拾色器角度指令

    使用cti-color-picker作为属性指令,例如&lt;div&gt;&lt;/div&gt;原料药API通过cti-color-picker属性公开,如演示文件中所示: cti-color-picker="main.colorData" ,其中颜色数据是具有颜色选择器坐标和rgba值的对象,来自cti-...

    JavaScript实现像素鸟

    管道的高度、位置要随机生成。 但要有最小高度与最大高度。 需要一个管道数组来保存所有的管道。 当管道移出画布,需要将管道从管道数组中移除。 12. 用gameEnd来标志游戏是否结束。 13. 鸟的绘制,鸟类...

    JavaScript模拟烟花炸裂

    使用JavaScript模拟烟花的炸裂,这里实现圆形炸裂和随机炸裂两种方式,模拟烟花炸裂的操作步骤为从下而上一个大烟花,到达鼠标的位置后大烟花消失,然后有多个移动到各个地方各种颜色的小烟花,再让其消失,实现代码...

    贪吃蛇 函数封装经典案例.docx

    //调用drawFood()函数,在随机位置绘制第一个食物 drawFood(); //随机生成贪吃蛇的蛇头坐标 x=Math.floor(Math.random()*width/w)*w; y=Math.floor(Math.random()*height/w)*w; //随机生成蛇的前进方向 ...

Global site tag (gtag.js) - Google Analytics