一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

javaScript实现文字图片无缝滚动特效代码

时间:2014-09-26 编辑:简简单单 来源:一聚教程网

今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝,但要在脑残的IE环境下。

没办法,为了达到要求,自己又从网上找了一些相关的代码加以修改,最终实现了效果,现在把代码分享给大家,有问题还请大家多指正。

代码如下:

 代码如下 复制代码





文字列表无缝向上滚动JavaScript代码



   


                

                 

                       
  • 这是第1条

  •                    
  • 这是第2条

  •                    
  • 这是第3条

  •                    
  • 这是第4条

  •                    
  • 这是第5条

  •                    
  • 这是第6条

  •                  
 
                

                

           



这里面需要注意的是,要加上我在style里面写的样式,另外两个注意点就是:里面的li不能float,最外围的xunhuan的高度要小于里面元素的高度,以足够它循环滚动。

例子是向上滚动的效果,如果想要向左滚动,做相应的改动即可。

热门栏目