需要实现类似QQ中对联系人的操作:向左滑动滑出删除按钮。滑动超过一半时松开则自动滑到底不到一半时松开则返回原处。
* 描述:html5苹果手机向左滑动删除特效
实际项目中的应用效果:
到上面一步基本实现了我们所需要的功能。但是有几个问题:
1. 右边的删除按钮点击失灵因为span无法冒泡到大按钮上;
2. 非常严重的问题,我们给div添加了touchmove事件同时用preventDefault()屏蔽了原始的浏览器事件导致上下滑动div的时候 页面无法滚动了!
第一个问题比较容易解决,峩们把span直接去掉将“删除”写到css中的:before里,像这样:
对于第二个问题网上说用iscroll来解决。我们这里参考手机QQ中对联系人的滑动操作
大致原理:在滑动最开始的时候,判断是Y轴的移动多 还是 X轴的移动多 如果是X轴移动大,则判断为滑动删除操作我们再使用preventDefault();
其中,我们加入┅个变量flaxX来判断滑动方向会在第一次触发滑动事件时设置。
之后就可以根据滑动方向来选择是否阻止浏览器默认事件了
2 * zepto插件:向左滑動删除动效 35 // 判断滑动方向,X轴阻止默认事件Y轴跳出使用浏览器默认 62 // 判断滑动方向,X轴阻止默认事件Y轴跳出使用浏览器默认
89 //结束时判断,并自动滑动到底或返回
这篇文章主要介绍了js实现js鼠标经過滑过文字链接色彩变化的效果,涉及javascriptjs鼠标经过事件及样式操作的技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js实现js鼠标经過滑过文字链接色彩变化效果的方法分享给大家供大家参考。具体实现方法如下:
希望本文所述对大家的javascript程序设计有所帮助