漂浮广告

来源:互联网 发布:查找两列中相同的数据 编辑:程序博客网 时间:2024/04/30 11:37
<div id="ad" style="position:absolute">
<a href="http://www.sohu.com" target="_blank">
<img src="error.gif" 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 + step*(xin?1:-1
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
= 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>

 代码分析:
<div id="ad" style="position:absolute">
<a href="http://www.flash8.net" target="_blank">
<img src="http://www.flash8.net/images/logo.gif" border="0"></a>
</div>
<script>
var x = 50,y = 60 //浮动层的初始位置,分别对应层的初始X坐标和Y坐标
var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上
var step = 1 //层移动的步长,值越大移动速度越快
var delay = 10 //层移动的时间间隔,单位为毫秒,值越小移动速度越快
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() //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果
</script>

 

跟随浏览器滚动条移动的浮动广告

<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//载入页面后,调用函数initAd()
</SCRIPT>
<script language="JScript">
<!--
function initAd() {
document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后,广告层相对于固定后的y方向位置
document.all.AdLayer.style.visibility = 'visible'//设置层为可见
MoveLayer('AdLayer');//调用函数MoveLayer()
}
function MoveLayer(layerName) {
var x = 600;//浮动广告层固定于浏览器的x方向位置
var y = 300;//浮动广告层固定于浏览器的y方向位置
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");//移动广告层
setTimeout("MoveLayer('AdLayer');", 20);//设置20毫秒后再调用函数MoveLayer()
}
//-->
</script>
<!--下面为一个ID为AdLayer的层(如ID名不为AdLayer,上面MoveLayer()内的AdLayer也要作相应修改)

,包括一张带链接的图片-->
<div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20;

visibility:hidden;; left: 600px; top: 300px'>
<a href="http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60"

width="60"></a>
</div>

 

 下面的代码实现:自上而下滑动的效果:

<span id="liveclock" style="LEFT: 0px; POSITION: absolute; TOP: 10px">
     <marquee direction=down onmousemove="this.stop()" style="WIDTH: 100px; HEIGHT: 1000px"
      onmouseout="this.start()" scrollAmount="3"><A href="图片连接到的地址" target="_blank"><IMG src="images/error.gif"></A></marquee>
    </span>

 

 

先上一个网站 然后把下边这段JavaScript代码复制到地址栏, 回车[Enter], 奇妙就产生了……

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

<script language="javascript">
R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.images; //取得窗口中所有图片元素对象
DIL=DI.length; //取得图片数
function A()
{
for(i=0; i-DIL; i++) //循环,即所有图片都要执行下列代码.不过这儿是i-DIL,我们一般都用i<DIL
{
DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5;  //这儿只是让它们动的算法
}
R++;   //改变R才能使坐标发生变化.
}
setInterval('A()',5); void(0);  //每5毫秒执行A函数一次
</script>