`
zyshaw
  • 浏览: 54055 次
  • 性别: 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>


分享到:
评论

相关推荐

    H5 DIV圆圈内随机运动

    `move.js`文件中,可能会包含一个定时器函数,用于每隔一定时间更新方形元素的位置,使其在圆形区域内沿随机方向移动: ```javascript const outerCircle = document.getElementById('outerCircle'); const ...

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

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

    PC网页随机变换位置的自由移动的图片广告代码,兼容性好

    然后,JavaScript负责实现图片的随机移动。通过`setInterval`函数定时更新广告图片的位置,每次更新时生成新的随机坐标。可以使用`Math.random()`函数生成0到1之间的随机数,再乘以屏幕宽度或高度得到新的位置值。...

    原生js代码随机跟随鼠标移动的彩球动画

    "原生js代码随机跟随鼠标移动的彩球动画"是一个很好的实例,它展示了如何利用JavaScript的基本原理和DOM操作来实现一个生动有趣的视觉效果。这个项目的核心在于监听鼠标的移动事件,并根据鼠标的位置更新彩球的位置...

    js实现点击生成随机div

    获取随机颜色的`divColor`函数则利用了随机数生成的原理,通过六次计算生成一个六位十六进制数(加上前面的`#`符号),最终形成一个随机颜色的字符串。每次执行`parseInt(Math.random()*16).toString(16)`会得到0到...

    CSS3实现的鼠标移动到图片上后随机切换效果

    在本文中,我们将深入探讨如何使用CSS3来实现一个独特的交互式效果,即当鼠标悬停在图片上时,图片会随机切换,鼠标移开后则显示最后一张图片。这种效果类似于抽奖界面,能给用户带来新颖的视觉体验。由于CSS3提供了...

    jquery 拖拽div

    当鼠标移动时,计算新的div位置并更新CSS。 ```javascript $(document).mousemove(function(e) { if (isDragging) { var newX = e.pageX - dragStartX; var newY = e.pageY - dragStartY; $("#draggableDiv")....

    js+css3鼠标滑过图片随机切换展示效果

    在本文中,我们将深入探讨如何使用JavaScript(js)和CSS3技术实现一款鼠标滑过图片时,图片随机切换展示的特效。这个特效模仿了扑克牌翻转的效果,为网页增添了一种动态且引人注目的视觉体验。我们将分为以下几个...

    js实现方块上下左右移动效果

    此外,`onOff`函数和`random`函数配合使用,用于随机选择方块移动的方向,创建一个更动态的移动效果。`onOff`函数通过切换flag的布尔值来控制方块的开始或停止移动,并根据传入的rand参数来确定是调用`moveLeft`还是...

    JavaScript随机数字键盘模拟器

    JavaScript随机数字键盘模拟器是一种常见的前端开发功能,用于在网页上模拟手机或计算器的数字输入键盘,常见于移动设备上的密码输入、数字选择等场景。本文将深入探讨如何使用JavaScript来实现这样的功能,包括基本...

    javascript九宫格图片随机打乱位置的实现方法

    通过上述步骤,我们能为每个div依次添加一个随机编号的图片,由于编号是随机产生的,这样就实现了图片的随机打乱。在每次页面加载或者用户点击“开始打乱”按钮时,可以通过调用上述函数fun()来重新打乱图片顺序,...

    js随机动画生成一组随机数字.zip

    例如,让一个div元素在屏幕内随机移动: ```javascript var element = document.getElementById('myElement'); setInterval(function() { var x = getRandomInt(0, window.innerWidth); var y = getRandomInt(0, ...

    jQuery鼠标移动发出气泡动画

    4. **气泡动画优化**:为了使效果更加逼真,可以考虑添加更多的细节,如气泡的透明度变化、随机大小和颜色,甚至添加风向等随机因素,使气泡移动路径不完全垂直。 通过以上步骤,我们就实现了鼠标移动时在Canvas上...

    js实现div色块碰撞

    当可拖动的div与固定的div发生碰撞时,固定的div会随机移动到一个新的位置,并且颜色会发生变化。这种效果为用户提供了视觉反馈,增加了互动性。 标签中的“js div色块碰撞”、“js色块碰撞”和“js div碰撞”...

    jQuery鼠标点击页面随机闪现文字特效

    在这个例子中,我们可以创建一个div元素,将随机文字放入其中,然后应用一个向上移动的动画。首先,设置div的初始位置,然后通过`.animate()`方法改变其`top`属性,模拟上浮效果: ```javascript var $floatingText...

    jquery 焦点图片随机切换效果

    - **响应式设计**:使轮播适应不同屏幕大小,保证在移动设备上的良好显示。 总的来说,这个项目提供了一个学习和实践jQuery动态效果的机会,特别是涉及到DOM操作、动画效果和事件处理。通过对`index.html`、`css`和...

    随机的jQuery背景滚动特效

    这个特效主要利用了JavaScript库jQuery的强大功能,将背景图片在页面滚动时以某种方式变化,如平滑移动、淡入淡出等,从而创造出引人入胜的视觉效果。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM...

    鼠标追踪特效(星星会随着鼠标移动)

    "鼠标追踪特效(星星会随着鼠标移动)" 是一种非常吸引人的交互式设计,它能够使用户在浏览页面时感受到更加生动和有趣的视觉体验。这个特效主要是通过HTML、CSS和JavaScript这三种核心技术来实现的。下面将详细讲解...

    网页中图片的飘动代码

    其中,“图片飘动”是一种常见的技术手段,它可以让页面中的图片像云朵一样自由移动,增加网站的趣味性和互动性。本文将详细介绍如何利用HTML、CSS 和 JavaScript 实现这一效果。 #### 二、技术原理 “图片飘动”...

    jQuery实现的Div窗口震动特效

    如果随机值小于10,元素会向相反方向移动,反之则向正方向移动。这种随机改变位置的方式模拟了震动的效果。 在页面加载完成后,通过`$(document).ready`事件监听器,当用户点击具有`.block`类的Div元素时,会触发`...

Global site tag (gtag.js) - Google Analytics