• sections1
    
• sections2
    
• sections3
    
• sections4
  

下面是jq插件源碼

/*
jQ向上滾動帶上下翻頁按鈕
*/
(function($){
$.fn.extend({
    Scroll:function(opt,callback){
        //參數(shù)初始化
        if(!opt) var opt={};
        var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕
        var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕
        var timerID;
        var _this=this.eq(0).find("ul:first");
        var   lineH=_this.find("li:first").height(), //獲取行高,此處行高固定但是當(dāng)文字偉一行或者兩行時，要動態(tài)獲取吧？？
            line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動的行數(shù)，默認(rèn)為一屏，即父容器高度
            speed=opt.speed?parseInt(opt.speed,10):500; //卷動速度，數(shù)值越大，速度越慢（毫秒）
            timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動的時間間隔（毫秒）
        if(line==0) line=1;
        var upHeight=0-line*lineH;
        //滾動函數(shù)
        var scrollUp=function(){
            _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數(shù)綁定
            _this.animate({
              //當(dāng)滾動的元素height為max-height時，實(shí)時獲取元素height
                marginTop:-_this.find("li:first").height()
            },speed,function(){
                // for(i=1;i<=line;i++){
                //     _this.find("li:first").appendTo(_this);
                // }
                _this.find("li:first").appendTo(_this);
                _this.css({marginTop:0});
                _btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點(diǎn)擊事件
            });
        }
        //Shawphy:向下翻頁函數(shù)
        var scrollDown=function(){
            _btnDown.unbind("click",scrollDown);
            for(i=1;i<=line;i++){
                _this.find("li:last").show().prependTo(_this);
            }
            _this.css({marginTop:-_this.find("li:first").height()});
            _this.animate({
                marginTop:0
            },speed,function(){
                _btnDown.bind("click",scrollDown);
            });
        }
        //Shawphy:自動播放
        var autoPlay = function(){
            if(timer)timerID = window.setInterval(scrollUp,timer);
        };
        var autoStop = function(){
            if(timer)window.clearInterval(timerID);
        };
         //鼠標(biāo)事件綁定
        _this.hover(autoStop,autoPlay).mouseout();
        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標(biāo)事件綁定
        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
    }
})
})(jQuery);

另外再貼一份，刪改之后的腳本

/*
jQ向上滾動帶上下翻頁按鈕
*/
(function($){
$.fn.extend({
    txtScroll:function(opt,callback){
        //參數(shù)初始化
        if(!opt) var opt={};
        var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕
        var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕
        var timerID;
        var _this=this.eq(0).find("ul:first");
            speed=opt.speed?parseInt(opt.speed,10):500; //卷動速度，數(shù)值越大，速度越慢（毫秒）
            timer=opt.timer?parseInt(opt.timer,10):2000; //滾動的時間間隔（毫秒）
        //滾動函數(shù)
        var scrollUp=function(){
            _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數(shù)綁定
            _this.animate({
                //當(dāng)滾動的元素height為max-height時，實(shí)時獲取元素height
                marginTop: -_this.find("li:first").height()
            },speed,function(){
                _this.find("li:first").appendTo(_this);
                _this.css({"marginTop":0});
                _btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點(diǎn)擊事件
            });
        }
        //Shawphy:向下翻頁函數(shù)
        var scrollDown=function(){
            _btnDown.unbind("click",scrollDown);
            _this.find("li:last").show().prependTo(_this);
            _this.css({marginTop:-_this.find("li:first").height()});
            _this.animate({
                marginTop:0
            },speed,function(){
                _btnDown.bind("click",scrollDown);
            });
        }
        //Shawphy:自動播放
        var autoPlay = function(){
            if(timer) setIntervalT = window.setInterval(scrollUp,timer);
        };
        var autoStop = function(){
            if(timer)window.clearInterval(setIntervalT);
        };
         //鼠標(biāo)事件綁定
        _this.hover(autoStop,autoPlay).mouseout();
        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標(biāo)事件綁定
        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
    }
})
})(jQuery);

運(yùn)行效果如下：

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

感謝各位的閱讀！關(guān)于“jQuery如何實(shí)現(xiàn)新聞播報滾動及淡入淡出效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！