常逛网站的人应该会发现有些网页的两旁会有图片上下飘来飘去的,甚至还会跟着卷轴跑(就是一定会出现在各位的视线内),这就是一种广告的运用。这类的广告是比跳出式(popup)的好很多,也比较容易被接受(!?),且使用者无法轻易的关掉它(还是有方法..)。
先来说说大概的做法好了,先准备一张广告图片,然后在页面上下的移动就OK了。但这并不局限用在广告上喔!
来看Body的Code:
我把要用来当广告的图片放在Div中,且为了让页面有卷轴,所以我在中输入了一堆Enter(换行用)。Div的position设为absolute,酱子才能移动位置。
接着就是JavaScript的Code:
_x是要用储存广告要离网页边界的距离,值越大就是越往右边,若广告图片要放在右边的话,_x就要改成是网页的宽 - (某值) - mydiv的宽。distance是用来设定每次移动的距离是多长。winH则是目前网页的高,divH的是mydiv的高,一开始我把mydiv的位置放在网页的最下面,所以是winH-divH,若是一开始要在最上面的话,只要把yy设为0就可以了。isP是一boolean值,预设是false。
当网页载入完时会执行init()函式,在init()函式中会先初始化mydiv的位置,并设定setInterval()在每100毫秒时执行moveAd()函式。
moveAd()函式主要是用来判断及移动广告图片用,若isP是false的话,表示还没移动到最上面,所以继续往上移动;若是true则表示已经碰到最上面的边界了,所以要变成往下移动。最后就是改变mydiv的位置到yy去,但为了让有卷轴时,能因为卷轴的移动而不影响广告图片的相对位置,所以还要加上网页卷轴的长度(scrollTop)才行。
酱就大功告成了!程式写法并不难,只是要先想好怎样来做判断就可以了。若想做到的是像弹力球的移动方式呢?嘿嘿!这就要多判断是否碰到左右边界,有兴趣的可以看下面的范例。
范例浏览:
http://abgne.myweb.hinet....015_1.htmlhttp://abgne.myweb.hinet....015_2.html以上内容于2005/11/23发表在小弟的Blog里
http://blog.xuite.net/abgne/diary1/4447055