前往顾页
以后地位: 主页 > 收集编程 > Jsp实例教程 >

jQuery网页背景图片滑动殊效代码

时候:2013-06-06 23:28来源:知行网www.zhixing123.cn 编辑:麦田守望者

这个结果是依托伟年夜的jQuery实现的,原体例来自blueandhack。

 

1.起首需求一张底图,比方我的是star.gif:

2.然后,在网页中粘贴这段代码

 
  1. <script type="text/javascript">// <![CDATA[   
  2.   var scrollSpeed = 70;   
  3.   var step = 1;   
  4.   var current = 0;   
  5.   var imageWidth = 2247;   
  6.   var headerWidth = 800;       
  7.   
  8.   var restartPosition = -(imageWidth - headerWidth);   
  9.   
  10.   function scrollBg(){   
  11.     current -= step;   
  12.     if (current == restartPosition){   
  13.       current = 0;   
  14.     }   
  15.   
  16.     $('#stars').css("background-position",current+"px 0");   
  17.   }   
  18.   
  19.   var init = setInterval("scrollBg()", scrollSpeed);   
  20. // ]]></script>   

3.把这段代码粘贴到style.css:

 
  1. #stars { background:url('star.gif') repeat scroll 0 0 transparentwidth:100%; }   

4.然后在头部的<body>标签后插手<div id="stars">

5.当然,不要忘了在底部</body>之前闭合标签,插手</div>

------分开线----------------------------
标签(Tag):jQuery jquery教程 jquery技能
------分开线----------------------------
保举内容
猜你感兴趣