jq ajax仿微博滚动插件jQuery.iscroll
2013-09-05 20:25
405 查看
jQuery.iscroll插件是款实时利用jquery ajax调用并在页面滚动的效果,可以说是防各种微博的滚动效果代码了,有需要了解的同学可参考。如题,模仿新浪微博首页滚动效果写的一个jQuery插件。
刚开始练习写jQuyer的插件,还不大熟手,凑合着用先。
代码如下:
刚开始练习写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);
相关文章推荐
- 【转载】仿微博滚动插件 – jQuery.iscroll
- 【jquery插件】jq_scrollFix滚动定位插件
- JQuery插件iScroll实现下拉刷新,滚动翻页特效
- 学习使用jquery iScroll.js移动端滚动条插件
- JQuery插件iScroll实现下拉刷新,滚动翻页特效
- JQuery插件iScroll实现下拉刷新,滚动翻页特效
- 学习使用jquery iScroll.js移动端滚动条插件
- 【转】推荐一个很棒的jquery图片滚动效果插件-jqFancyTransitions
- 最牛x的滚动插件 – jquery的iscroll插件(附上下拉刷新消息demo)
- jquery图片滚动插件(可自定义数字样式和左右点击按钮)
- jQuery.hhLRSlider 左右滚动图片插件
- 一款不错的jquery scroll滚动插件
- 基于jQuery图片平滑连续滚动插件(转)
- Jquery使用Firefox FireBug插件调试Ajax步骤讲解
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jquery自由定位层,随滚动条滚动层插件,对联插件,广告插件
- Jq-滚动条插件写法(一)
- jquery ajaxFileUpload.js插件支持多文件上传的方法
- 自己写的jQuery插件(五)--跟随滚动条滚动的层