<html>
<head>
<title>js漂浮窗口</title>
<body>
<div id="codefans_net" style="position:absolute">
<!--链接地址--><a href="#" target="_blank">
<!--图片地址--><img src="android12.jpg" border="0">
</a>
</div>
<script>
//x和y开始移动的位置
var x = 50,y = 60
//xin和yin标识正反方向移动的判断
var xin = true, yin = true
//每次移动的位移为10px
var step = 10
//每隔0.5秒移动一次
var delay = 500
//根据层ID获取要移动的层的对象
var obj=document.getElementById("codefans_net")
//浮动的函数
function float() {
//L和T表示浏览器窗口左边和顶部开始的坐标
var L=T=0
//R和B表示浏览器窗口右边和底部部减去浮动层宽和高的交点的坐标
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 = x + step*(xin?1:-1)
if (x < L) {//表示浮动层的x坐标位置小于浏览器窗口最左边的位置设置xin为正向,x=L=0;
xin = true;
x = L
}
if (x > R){//表示浮动层的x坐标位置大于浏览器窗口最右边的位置设置xin为反向,x=R;
xin = false;
x = R
}
//计算y的位置
y = y + step*(yin?1:-1)
if (y < T) { //表示浮动层的x坐标位置小于浏览器窗口最顶部的位置设置yin为正向,y=T=0;
yin = true;
y = T
}
if (y > B) { //表示浮动层的x坐标位置大于浏览器窗口最底部的位置设置yin为反向,y = B;
yin = false;
y = B
}
}
// setInterval() 方法按照指定的delay毫秒为周期来调用执行浮动方法float()。
var itl= setInterval("float()", delay)
// clearInterval() 方法可以取消该周期性的方法调用。
obj.onmouseover=function(){clearInterval(itl)}
// setInterval() 方法按照指定的delay毫秒为周期来调用执行浮动方法float()。
obj.onmouseout=function(){itl=setInterval("float()", delay)}
</script>
</body>
</html>
分享到:
相关推荐
【标题】"js物理弹性漂浮广告_兼容版"指的是一个使用JavaScript编写的,具有物理弹性效果的浮动广告代码库,特别强调了它的兼容性,意味着它能够在多种浏览器和设备上正常运行。在网页设计中,漂浮广告通常是那些在...
漂浮广告,又称为浮动广告或滑动广告,是网页设计中一种吸引用户注意力的策略。通过使用JS,开发者可以创建动态的、位置固定的广告元素,这些元素可以在页面的各个角落或者沿着屏幕边缘跟随用户滚动。这样的设计能够...
在本项目"JS物理弹性漂浮广告.rar"中,我们聚焦于使用JavaScript实现的一种动态广告效果,这种效果通常被称为“漂浮广告”或“弹窗漂浮”。在网页浏览时,这种广告会跟随用户滚动页面而始终停留在视野范围内,从而...
通过查看源代码,我们可以进一步了解如何将这些元素组合在一起,实现一个完整的js漂浮广告效果。 总结,js漂浮广告是一种利用JavaScript技术和网页DOM操作实现的广告展示形式,它通过实时调整广告元素的位置,使得...
【js物理弹性漂浮广告】是一种利用JavaScript技术实现的网页广告设计方式,它结合了物理模拟的概念,使得广告在页面上呈现出类似真实物体弹性运动的效果,吸引用户的注意力并提高互动性。这种广告通常会悬浮在网页的...
JavaScript在漂浮广告中的作用主要体现在交互性和动态效果上。例如,当用户滚动页面时,可以通过监听window的scroll事件来调整广告的位置,使其始终保持在可视区域内。同时,JavaScript还可以用于控制广告的显示和...
- 浮动:虽然通常用CSS的float属性实现浮动布局,但在漂浮广告中,更多的是使用JavaScript动态调整top和left值。 - 动画效果:CSS的transition和animation属性可以创建平滑的过渡和动画,增强广告的视觉吸引力。 ...
在屏幕内漂浮的图片广告效果代码是一种常见的浮动广告代码,能够吸引用户的注意力。但是,浮动广告也存在一些缺点,例如对用户体验的影响。因此,在使用浮动广告时,需要注意用户体验的影响,并采取相应的措施来改善...
漂浮广告代码是一种常见的网页设计技术,用于在网站上展示浮动的广告元素,通常是一个图片或视频,可以吸引用户注意力并引导他们访问特定的广告页面。这种广告设计旨在提高广告的可见性和交互性,同时也允许用户通过...
漂浮广告,也被称为浮动广告或跟随广告,是网页设计中一种常见的营销手段,它以JavaScript为主要实现方式,能够在用户浏览网页时始终保持在屏幕的某一固定位置,吸引用户的注意力。这种广告形式通常会出现在页面的...
漂浮广告,也被称为浮动广告,是网页设计中一种常见的广告形式。这种广告设计的特点是,它会在用户浏览页面时始终停留在屏幕的特定位置,通常是屏幕的边缘,无论是用户滚动页面还是阅读内容,广告都会“漂浮”在那里...
标题中的“jQuery做浮动层/浮动广告/漂浮”指的是使用jQuery这个JavaScript库来实现页面上的元素(通常为广告)保持在用户滚动页面时始终可见的效果。这种技术常见于网页设计中,用来吸引用户的注意力或者提供重要的...
JQuery,作为一款强大的JavaScript库,提供了丰富的功能来实现动态效果,包括创建浮动图片广告。本文将深入探讨如何利用jQuery实现页面上的浮动图片广告代码。 首先,我们需要了解jQuery的基本用法。jQuery简化了...
### 带关闭按钮的网页漂浮广告代码分析 #### 一、背景介绍 在现代网页设计中,广告是网站盈利的重要方式之一。为了提高广告的可见度与互动性,许多网站采用各种技术手段实现广告的展示效果。其中,带有关闭按钮的...
【标题】中的“全屏漂浮广告图层效果源码”指的是一个编程代码资源,用于实现网页上的全屏广告展示,并且这个广告图层会在页面上浮动,吸引用户的注意力。这种效果常见于网页设计和前端开发中,用来提高广告的可见性...
在JavaScript中实现漂浮广告,主要涉及以下几个关键知识点: 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作网页元素。你需要先获取广告元素的DOM节点,然后设置其CSS属性,如`position: fixed...
JS(JavaScript)是一种广泛使用的网页脚本语言,它是构成动态网站、网页和Web应用不可...需要注意的是,虽然这种漂浮广告可以吸引眼球,但也可能给用户带来困扰,因此在使用时需要权衡用户体验与广告效果之间的关系。
"符合Web标准的浮动广告(图片漂浮广告)效果代码.zip" 文件提供了一种实现这一效果的前端代码示例。以下是关于浮动广告及Web标准相关的重要知识点: 1. **Web标准**:Web标准是一系列规范,旨在确保网页内容能够跨...