jq ajax仿微博滚动插件jQuery.iscroll

JQuery

1个成员

jq ajax仿微博滚动插件jQuery.iscroll

发表于 2017-01-12 • 3213 次查看

jQuery.iscroll插件是款实时利用jquery ajax调用并在页面滚动的效果，可以说是防各种微博的滚动效果代码了，有需要了解的同学可参考。

如题，模仿新浪微博首页滚动效果写的一个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 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);