X龙@China .Net 'blog

需要的不仅仅是工作,而是通过努力得来的美好将来。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Js滚动效果

Posted on 2011-04-15 20:15  X龙  阅读(385)  评论(0编辑  收藏  举报
1.Marquee.js
http://www.popub.net/script/MSClass.html
这个js功能比较齐全,几乎所有效果都有,比较好用。
2.
var scrollElem;
                    
var stopscroll;
                    
var stoptime;
                    
var preTop;
                    
var leftElem;
                    
var currentTop;
                    
var marqueesHeight;

                    
function marque(width, height, marqueName, marqueCName)
                    {
                        
try
                        {
                            marqueesHeight 
= height;
                            stopscroll 
= false;
                            scrollElem 
= document.getElementById(marqueName);
                            
with (scrollElem)
                            {
                                style.width 
= width;
                                style.height 
= marqueesHeight;
                                style.overflow 
= 'hidden';
                                noWrap 
= true;
                            }
                            scrollElem.onmouseover 
= new Function('stopscroll = true');
                            scrollElem.onmouseout 
= new Function('stopscroll = false');
                            preTop 
= 0;
                            currentTop 
= 0;
                            stoptime 
= 0;
                            leftElem 
= document.getElementById(marqueCName);
                            scrollElem.appendChild(leftElem.cloneNode(
true));

                            init_srolltext();
                        } 
catch (e) { }
                    }
                    
function init_srolltext()
                    {
                        scrollElem.scrollTop 
= 0;
                        setInterval(
'scrollUp()'20);
                    }
                    
function scrollUp()
                    {
                        
if (stopscroll) return;
                        currentTop 
+= 1;
                        
if (currentTop == marqueesHeight + 1)
                        {
                            stoptime 
+= 1;
                            currentTop 
-= 1;
                            
if (stoptime == (marqueesHeight) * 4)
                            {
//停顿时间
                                currentTop = 0;
                                stoptime 
= 0;
                            }
                        } 
else
                        {
                            preTop 
= scrollElem.scrollTop;
                            scrollElem.scrollTop 
+= 1;
                            
if (preTop == scrollElem.scrollTop)
                            {
                                scrollElem.scrollTop 
= marqueesHeight;
                                scrollElem.scrollTop 
+= 1;
                            }
                        }
                    }

                    
// marque(810, 30, "innerul", "innerul")

3.单行滚动,一行只有一个元素。

                     function AutoScrollUp(obj){
                            $(obj).find(
"ul:first").animate({
                                    marginTop:
"-33px"
                            },
500,function(){
                                    $(
this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                            });
                        }
                    
                     $(document).ready(
function(){
                        setInterval(
'AutoScrollUp("#innerul")',2000);
                     })

 

点击这里给我发消息http://wp.qq.com/index.html