javascript效果----流动的背景
程序员文章站
2022-05-29 07:52:31
...
流动的背景
-
<html> <head> <title>流动的背景</title> </head> <body background="1.jpg"> <script> var backgroundOffset = 0; //背景图片的偏移量 var bgObject = eval('document.body'); //得到文挡本身的对象 function scrollBG(maxSize){ //这个函数就是滚动背景的核心 backgroundOffset = backgroundOffset + 0.5; //将背景偏移加0.5点 if(backgroundOffset > maxSize) backgroundOffset = 0; //如果偏移量超过了最大值则回零 bgObject.style.backgroundPosition = "0 " + backgroundOffset; //设定背景的偏移量，使其生效 } var ScrollTimer = window.setInterval("scrollBG(10000)", 1); //设定每次移动背景之间的间隔。 </script> <div style="position: absolute; top: 200; left:200;right:200;"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="300%"> <b style="font-size:36px;color:#F00"> 当偏移量超过了最大值回零时，背景图片会有轻微的停顿，所以为了美观这里设置偏移量为10000 ，间隔时间设置越小，背景移动的越快。 </b> </td> </tr> </table> </div> </body> </html>
用软件制作的gif的效果看起来不是很好，这里仅供参考，建议自己测试：
上一篇： 内存重叠问题
下一篇： OpenGL ES ---粒子效果的制作