首页 > 代码库 > 使用javascript实现手机上的touchmove效果

使用javascript实现手机上的touchmove效果

2024-08-04 14:04:13   220人阅读

完成效果：

只能在手机上演示效果，电脑上可以用chrome浏览器开发者工具中的UA来模拟手机。

<pre name="code" class="html"><!DOCTYPE html>
<html>

	<head>
		<script src=http://www.mamicode.com/"//code.jquery.com/jquery-1.9.1.min.js"></script>>

参考博客
背景：手机浏览器不支持JQuery的mousedown,mousemove,mouseup事件，想用jquery来写，但是百度过后发现jquery也没有支持手机手势滑动的方法。最终找到了上面的这篇博客才解决了问题。
<span style="color:#ff0000;">nav_widthx = document.body.clientWidth; //获取可视区域宽度</span>
<span style="color: rgb(255, 0, 0); font-family: Arial, Helvetica, sans-serif;">max_width = (tag_num * 60 - nav_widthx + 100) * -1; //获取左滑最大距离</span>
上述代码是为了在滑到最右边的时候，控制左滑最大距离，不会让菜单消失。
不足之处：
<span style="color:#ff0000;">document.getElementById("head").addEventListener('touchstart', touchStart);
				document.getElementById("head").addEventListener('touchmove', touchMove);
				document.getElementById("head").addEventListener('touchend', function() {
					isMove = false;
				});</span>
<span style="color:#ff0000;"></span><pre name="code" class="html" style="font-size:18px;"><span style="color:#ff0000;">tx = parseInt($("#head").css('left'));//这个地方也需要改</span>

元素绑定事件有些繁琐，不知道怎样写可以让调用的时候尽量简化。因为页面中不止这一个要滑动的部分。
最后像这样调用：$(".head").drag();
有知道怎么写的一定要告诉我啊~~

使用javascript实现手机上的touchmove效果






























        

            
                
                  
                
                

                    联系

                    我们