如何制作漂浮运动的广告

如何制作漂浮运动的广告

 

　　如何制作漂浮运动的广告
解决思路：
    要实现漂浮运动的效果，就必须用层了，然后设置一个定时器，让层按一个轨迹算法不断运动。
具体步骤：
1.先插入作为广告的层。

<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>
2.设置层的初始位置和运动方向。

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)

3.在鼠标移上该层时层的运行停止。

obj.onmouseover=function(){clearInterval(itl)}

4.在鼠标移开时层继续运动。

obj.onmouseout=function(){itl=setInterval(’floatAD()’, delay)}

5.完整代码。

<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>
//浮动层的初始位置，分别对应层的初始X坐标和Y坐标
var x = 50,y = 60 
//判断层的X坐标和Y坐标是否在在控制范围之内，xin为真时层向右移动，否则向//左；yin为真时层向下移动，否则向上
var xin = true, yin = true                    
var step = 1      //层移动的步长，值越大移动速度越快
var delay = 10    //层移动的时间间隔,单位为毫秒，值越小移动速度越快
//捕获id为ad的层作为漂浮目标
var obj=document.getElementById("ad")
function floatAD() {
    var L=T=0         //层移动范围的左边界(L)和上边界(T)坐标
//层移动的右边界
    var R= document.body.clientWidth-obj.offsetWidth 
//层移动的下边界
    var B = document.body.clientHeight-obj.offsetHeight  
/*更新层的X坐标以实现X轴方向上的运动。document.body.scrollLeft
为文档区域的滚动条向右滚动的距离，以保证在滚动条右拉时层仍在可见范围内*/
obj.style.left = x + document.body.scrollLeft    
/*更新层的Y坐标以实现Y轴方向上的运动。document.body.scrollTop为文档区域的滚动条向下拉的距离，以保证在滚动条下拉时层仍在可见范围内*/ 
obj.style.top = 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 }//层超出下边界时的处理
 }
//每delay秒执行一次floatAD函数
var itl= setInterval(’floatAD()’, delay)             
//层在鼠标移上时清除上面的间隔事件，实现层在的鼠标移上时停止运动的效果
obj.onmouseover=function(){clearInterval(itl)}       
//层在鼠标移开时开始间隔事件，实现层在的鼠标移开时继续运动的效果
obj.onmouseout=function(){itl=setInterval(’floatAD()’, delay)} </script>