zoukankan      html  css  js  c++  java
  • 分享一个discuz touch端的jQuery下拉刷新组件

    在线Demo

    最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/img/',不多说直接上代码

    var pullrefresh = {
    	init : function() {
    		var pos = {};
    		var status = false;
    		var divobj = null;
    		var contentobj = null;
    		var reloadflag = false;
    		$('body').on('touchstart', function(e) {
    			e = mygetnativeevent(e);
    			pos.startx = e.touches[0].pageX;
    			pos.starty = e.touches[0].pageY;
    		})
    		.on('touchmove', function(e) {
    			e = mygetnativeevent(e);
    			pos.curposx = e.touches[0].pageX;
    			pos.curposy = e.touches[0].pageY;
    			if(pos.curposy - pos.starty < 0 && !status) {
    				return;
    			}
    			if(!status && $(window).scrollTop() <= 0) {
    				status = true;
    				divobj = document.createElement('div');
    				divobj = $(divobj);
    				divobj.css({'position':'relative', 'margin-left':'-85px'});
    				$('body').prepend(divobj);
    				contentobj = document.createElement('div');
    				contentobj = $(contentobj);
    				contentobj.css({'position':'absolute', 'height':'30px', 'top': '-30px', 'left':'50%'});
    				contentobj.html('<img src="'+ STATICURL + 'icon_arrow.gif" style="vertical-align:middle;margin-right:5px;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);"><span id="refreshtxt">下拉可以刷新</span>');
    				contentobj.find('img').css({'-webkit-transition':'all 0.5s ease-in-out'});
    				divobj.prepend(contentobj);
    				pos.topx = pos.curposx;
    				pos.topy = pos.curposy;
    			}
    			if(!status) {
    				return;
    			}
    			if(status == true) {
    				var pullheight = pos.curposy - pos.topy;
    				if(pullheight >= 0 && pullheight < 150) {
    					divobj.css({'height': pullheight/2 + 'px'});
    					contentobj.css({'top': (-30 + pullheight/2) + 'px'});
    					if(reloadflag) {
    						contentobj.find('img').css({'-webkit-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)', 'transform':'rotate(180deg)'});
    						contentobj.find('#refreshtxt').html('下拉可以刷新');
    					}
    					reloadflag = false;
    				} else if(pullheight >= 150) {
    					divobj.css({'height':pullheight/2 + 'px'});
    					contentobj.css({'top': (-30 + pullheight/2) + 'px'});
    					if(!reloadflag) {
    						contentobj.find('img').css({'-webkit-transform':'rotate(360deg)', '-moz-transform':'rotate(360deg)', '-o-transform':'rotate(360deg)', 'transform':'rotate(360deg)'});
    						contentobj.find('#refreshtxt').html('松开可以刷新');
    					}
    					reloadflag = true;
    				}
    			}
    			e.preventDefault();
    		})
    		.on('touchend', function(e) {
    			if(status == true) {
    				if(reloadflag) {
    					contentobj.html('<img src="'+ STATICURL + 'icon_load.gif" style="vertical-align:middle;margin-right:5px;">正在加载...');
    					contentobj.animate({'top': (-30 + 75) + 'px'}, 618, 'linear');
    					divobj.animate({'height': '75px'}, 618, 'linear', function() {
    						window.location.reload();
    					});
    					return;
    				}
    			}                       
                     if(divobj != null)// fixed bugs by Nelson 20160818                    
                     {                       
                         divobj.remove();                        
                     }
    			divobj = null;
    			status = false;
    			pos = {};
    		});
    	}
    };
    
    function mygetnativeevent(event) {
    
    	while(event && typeof event.originalEvent !== "undefined") {
    		event = event.originalEvent;
    	}
    	return event;
    }
    

      

  • 相关阅读:
    Android应用程序与SurfaceFlinger服务的关系概述和学习计划【转】
    Linux内核的LED设备驱动框架【转】
    电源管理-4种休眠方式状态
    linux 管道,输出重定向,后端执行
    find 和grep的区别
    linux启动脚本
    linux启动介绍
    sudo的使用
    ps aux|grep *** 解释
    php图片防盗链
  • 原文地址:https://www.cnblogs.com/fastmover/p/5629058.html
Copyright © 2011-2022 走看看