详细解析网页漂浮广告代码的含义

广告|网页

  网页漂浮广图片特效,这种特效我们总是很喜欢,鼠标指向图片后图片停止移动。

<div id="ad" style="position:absolute"><a href="http://www.webjx.com"><img src="/UploadPic/2007-7/200777163350746.jpg" border="0"></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>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

说明:代码分析:

<div id="ad" style="position:absolute"><a href="http://www.webjx.com" target="_blank"><img src="/UploadPic/2007-7/200777163350746.jpg" border="0"></a></div>
<script>
var x = 50,y = 60 //[color=Maroon]浮动层的初始位置,分别对应层的初始X坐标和Y坐标
var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上
var step = 1 //层移动的步长,值越大移动速度越快
var delay = 5 //层移动的时间间隔,单位为毫秒,值越小移动速度越快
var obj=document.getElementById("ad") //捕获id为ad的层作为漂浮目标
function floatAD() {
var L=T=0 //层移动范围的左边界(L)和上边界(T)坐标
var R= document.body.clientWidth-obj.offsetWidth //层移动的右边界
var B = document.body.clientHeight-obj.offsetHeight //层移动的下边界
obj.style.left = x + document.body.scrollLeft //更新层的X坐标,实现X轴方向上的运动;document.body.scrollLeft为文档区域的滚动条向右拉的距离,以保证在滚动条右拉时层仍在可见范围内
obj.style.top = y + document.body.scrollTop //更新层的Y坐标,实现Y轴方向上的运动;document.body.scrollTop为文档区域的滚动条向下拉的距离,以保证在滚动条下拉时层仍在可见范围内
x = x + step*(xin?1:-1) //通过判断层的范围决定层在X轴上的运动方向
if (x < L) { xin = true; x = L} //层超出左边界时的处理
if (x > R){ xin = false; x = R} //层超出右边界时的处理
y = y + step*(yin?1:-1) //通过判断层的范围决定层在Y轴上的运动方向
if (y < T) { yin = true; y = T } //层超出上边界时的处理
if (y > B) { yin = false; y = B } //层超出下边界时的处理
}
var itl= setInterval("floatAD()", delay) //每delay秒执行一次floatAD函数
obj.onmouseover=function(){clearInterval(itl)} //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果
</script>

时间: 2024-10-28 13:05:30

详细解析网页漂浮广告代码的含义的相关文章

详解网页漂浮广告代码的含义

网页漂浮广图片特效,这种特效我们总是很喜欢,鼠标指向图片后图片停止移动. <pre><div id="ad" style="position:absolute"><a href="http://www.cnwebshow.com"><img src="/img/200406301.jpg" border="0"></a></div>&l

Javascript实现带关闭按钮的网页漂浮广告代码

 带有关闭功能的漂浮图片的实现方法有很多,下面为大家介绍下使用Javascript是如何实现的,喜欢的额朋友可以了解下  代码如下: <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title>带关闭按钮的网页漂浮广告代码</title>  </head>  <bo

Javascript实现带关闭按钮的网页漂浮广告代码_javascript技巧

复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的网页漂浮广告代码</title> </head> <body> <div id="img" style="position: absol

漂浮广告代码兼容ie、firefox,多个漂浮不冲突,调用只需两行代码

原文:漂浮广告代码兼容ie.firefox,多个漂浮不冲突,调用只需两行代码 将广告内容放在div中,设置一个id,然后用下面方法调用var adcls=new AdMove("div的id");adcls.Run();注意,在调用前要先引用Main.js和AdFloat.js,div也要在调用前写好,原因就不用说了吧 或者也可以用下面方法,在页面加载完成时调用,就不用考虑位置了addEvent(window,"load",initad);function init

不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码_经验交流

纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: 复制代码 代码如下: .r1{width:80px;height:80px;background:red;float:right;          position:fixed !important; top/**/:200px;          position:absolute; z-index:300; top:expression(offsetParent.

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码_javascript技巧

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html

js 漂浮广告代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JS随机漂浮广告代码具体实例_javascript技巧

复制代码 代码如下: <!--随机漂浮广告开始--><div id="float" style="position:absolute; z-index:3;(我建议大家把这里设为100,这样浮动图就不会被遮住了) left: 512px; width: 83px; top: 9px; height: 53px;">      <img src="piaofu.gif" width="100" he

漂浮广告代码完全解析

广告 先看代码运行效果: <div id="ad" style="position:absolute"><a href="http://www.webjx.com" target="_blank"><img src="/UploadPic/2007-7/200777171534916.gif" border="0"></a></div