jq ajax仿微博滾動外掛程式jQuery.iscroll

來源:互聯網
上載者:User

如題,模仿新浪微博首頁滾動效果寫的一個jQuery外掛程式。
剛開始練習寫jQuyer的外掛程式,還不大熟手,湊合著用先。
代碼如下:

 

 代碼如下 複製代碼

(function(jQuery){
    /**
   
     * Date: 2012/01/22
     *
     * @projectDescription 仿照微薄滾動效果
     *
     * @author Joe nikejaycn#gmail.com
     * @version v0.1
     */
    jQuery.fn.iscroll = function(params){
        options = {
            ShowTime: 500, //顯示時間
            moveTime: 3000, //移動時間
            charElement:"li", //子節點
            ajaxTrunOn: false, //是否開啟ajax請求,定時擷取資料
            ajaxTime: 30000, //發出一次ajax請求時間,預設是30秒擷取一次資料
            ajaxUrl: "", //ajax資料請求路徑
            setAjaxHtml: function(data){ //資料來源輸出設定
                //data是ajax返回資料
    //在這裡都其進行格式化輸出
            }
        };
        jQuery.extend(options, params);
        //儲存當前對象
        var _this = this,
            isIE = !!window.ActiveXObject,
            isIE6 = isIE&&!window.XMLHttpRequest,
            jsonData = false,
            jsonCount = -1;

        //滑鼠經過設定name值為"hovered"
        function setHover(){
            _this.hover(function(){
               _this.attr("name","hovered");
            },function(){
               _this.removeAttr("name");
            });
        }setHover();

        function animateHandler(){
            if(options.ajaxTrunOn){
                //處理請求資料
                handlerJson();
            }
            var height = _this.find(".itemt:last").height();
            _this.find(".itemt:last").css({"opacity":0,"height":0});
            _this.find(".itemt:first").before( _this.find(".itemt:last") );
            _this.find(".itemt:first").animate({"height":height},options.ShowTime);
            _this.find(".itemt:first").animate({"opacity":"1"},options.ShowTime);
        }

        function setMove(){
            if(_this.attr("name") != "hovered"){
                animateHandler();
            }
        }

        //設定定時滾動
        setInterval(function(){
            jsonCount++;
            setMove();
        },options.moveTime);

        //定時查詢一次資料
        if(options.ajaxTrunOn){
            setInterval(function(){
               getNewsList();
            },options.ajaxTime);
        }
        //ajax請求
        function getNewsList(){
            $.ajax({
                url: options.ajaxUrl,
                dataTypes: "json",
                success: function(json){
                    jsonCount = -1;
                    jsonData = json;
                }
            })
        }

        //處理請求回來的json
        function handlerJson(){
            if(jsonData){
                _jsonData = eval( "(" +jsonData + ")");
                var _length = _jsonData.length;
                if(jsonCount < _length){
                    //處理相應的函數
                    _this.find(".itemt:last").css("height","auto");//清除高度
                    _this.find(".itemt:last").html(options.setAjaxHtml(_jsonData[jsonCount]));
                }
            }
        }
    }
})(jQuery);

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.