欢迎使用CSDN-markdown编辑器
来源:互联网 发布:沧澜网络代练可信吗 编辑:程序博客网 时间:2024/06/14 18:24
比较仓促,
先放上去吧,方面以后再来修改
(function(jQuery,document){ if(!jQuery){ if(console.error){ console.error("请先引入 jQuery.js"); } return; } if(!document || !document.body){ if(console.error){ console.error("需要body加载完成之后在能执行pull.js"); } return; } var b = document.body; var x,y,scrollTop; var isTouch,isPullDown=false,isPullUp=false; b.addEventListener("touchstart", function(evt){ //console.log('touchstart'); var touch = evt.touches[0]; //获取第一个触点 x = Number(touch.pageX); //页面触点X坐标 y = Number(touch.pageY); //页面触点Y坐标 scrollTop=b.scrollTop; isTouch=true; //console.log('x = ' + x); //console.log('y = ' + y); }); b.addEventListener("touchend", function(evt){ //console.log('touchend'); isTouch=false; isPullDown=false; isPullUp=false; }); b.addEventListener("touchmove", function(evt){ //console.log('touchmove'); var touch = evt.touches[0]; //获取第一个触点 var mx = Number(touch.pageX); //页面触点X坐标 var my = Number(touch.pageY); //页面触点Y坐标 //console.log("isTouch = " + isTouch) //console.log("y-my = " + (y-my)) //console.log("b.scrollTop = " + b.scrollTop); if(isTouch){ if(my -y >30){ if(b.scrollTop==0){ if(!isPullUp){ console.log("pullUp"); isPullUp=true; } } } if( y-my > 100 ){ if(scrollTop!=0 && scrollTop == b.scrollTop){ if(!isPullDown){ //console.log('my = ' + my); //console.log('y = ' + y); //console.log('scrollTop = ' + scrollTop); //console.log('b.scrollTop = ' + b.scrollTop); console.log("pullDown"); isPullDown=true; } } } } });})(jQuery,document)
-=—————————————————-
修改了一下
(function($){ if(!$){ if(console.error){ console.error("请先引入 jQuery.js"); } return; } var Pull= function(b,setting){ if(!b){ if(console.error){ console.error("需要body加载完成之后在能执行pull.js"); } return; } b = b[0]; var settings=$.extend({},Pull.defaults,setting); var x,y,scrollTop; var isTouch,isPullDown=false,isPullUp=false; b.addEventListener("touchstart", function(evt){ //console.log('touchstart'); var touch = evt.touches[0]; //获取第一个触点 x = Number(touch.pageX); //页面触点X坐标 y = Number(touch.pageY); //页面触点Y坐标 scrollTop=b.scrollTop; isTouch=true; //console.log('x = ' + x); //console.log('y = ' + y); }); b.addEventListener("touchend", function(evt){ //console.log('touchend'); isTouch=false; isPullDown=false; isPullUp=false; }); b.addEventListener("touchmove", function(evt){ //console.log('touchmove'); var touch = evt.touches[0]; //获取第一个触点 var mx = Number(touch.pageX); //页面触点X坐标 var my = Number(touch.pageY); //页面触点Y坐标 //console.log("isTouch = " + isTouch) //console.log("y-my = " + (y-my)) //console.log("b.scrollTop = " + b.scrollTop); if(isTouch){ if(my -y >30){ if(b.scrollTop==0){ if(!isPullUp){ if(settings.pullUp){ settings.pullUp(); } //console.log("pullUp"); isPullUp=true; } } } if( y-my > 100 ){ if(scrollTop!=0 && scrollTop == b.scrollTop){ if(!isPullDown){ //console.log('my = ' + my); //console.log('y = ' + y); //console.log('scrollTop = ' + scrollTop); //console.log('b.scrollTop = ' + b.scrollTop); if(settings.pullDown){ settings.pullDown(); } isPullDown=true; } } } } }); } Pull.defaults={ pullDown:function(){ if(console.log){ console.log("pullDown") } }, pullUp:function(){ if(console.log){ console.log("pullUp") } } } $.fn.Pull=function(settings){ return new Pull(this,settings); };})(jQuery)
<html> <head> <title>test</title> <meta name="viewport" content="width=640, user-scalable=yes,initial-scale=0.1,maximum-scale=0.1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery.min.js"></script> <script src="pull.js"></script> <script type="text/javascript"> $(document).ready(function(){ var setting = { pullDown:function(){ console.log("pullDown2"); }, pullUp:function(){ console.log("pullUp2") } } $(document.body).Pull(setting); }); </script> <style type="text/css"> body{ text-align:center; margin:0 atuto; } .container{ overflow: auto; } .container div{ line-height: 60px; font-size: 24px; margin-top: 50px; } </style> </head> <body> <div class="container"> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div> </div> </body></html>
只在chrome里测试了, chrome的测试方法,是打开chrome开发工具,点击开发工具工具栏最左边的手机模拟器图标 ,然后滑动
吐糟一下,自从csdn把iteye收购以后,iteye的用户活跃度是直线下降,何弃疗啊
这个功能原来是发不到iteye的,其实我一直是用iteye的,就是应为iteye很简洁。
现在都快死了,没办法,搬到csdn里面吧
0 0
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- weka J48决策树学习
- [***]在Unity 脚本中的作用 C#
- Spring学习笔记(转+改)
- 在Servlet(或者Filter,或者Listener)中使用spring的IOC容器
- python时间戳于时间格式字符串相互转换的方法
- 欢迎使用CSDN-markdown编辑器
- iOS下使用rsa算法与php进行加解密通讯
- 存在hinnt属性的控件。重新hinnt的值(图片+文字)
- C# static
- Android手机平板两不误,使用Fragment实现兼容手机和平板的程序
- IOS 使用XIB 自定义View
- vs2010解决提示“一个或多个多重定义的符号“这种错误
- 编译原理 龙书 第二章 一个简单的算术式(+,-)翻译器实现
- 在Eclipse中创建Maven多模块工程的例子