三星平板怎么设置jq手机端手指滑动事件特效

来源：蜘蛛抓取(WebSpider) 时间：2016-09-22 05:03 标签： jquery 手指滑动特效
只需一步，快速开始
后使用快捷导航没有帐号？
移动手机APP滑动手指切换图片特效
这是一款效果非常炫酷的移动手机APP滑动手指切换图片特效。该APP特效在移动手机中用户可以通过手指的左右滑动来切换图片，在桌面设备中通过鼠标也可达到同样的效果。
& &&&下载：
使用方法 HTML结构这个移动手机APP切换图片特效的HTML结构采用嵌套的HTML结构，每一张图片卡片都包裹在 div.demo__card 中，里面放置了图片，描述信息和一些额外的图层。
&div class=&demo__card&&
&&&div class=&demo__card__top brown&&
& & &div class=&demo__card__img&&&/div&
& & &p class=&demo__card__name&&Hungry cat&/p&
&&&/div&
&&&div class=&demo__card__btm&&
& & &p class=&demo__card__we&&Whatever&/p&
&&&/div&
&&&div class=&demo__card__choice m--reject&&&/div&
&&&div class=&demo__card__choice m--like&&&/div&
&&&div class=&demo__card__drag&&&/div&
&/div&复制代码
m--reject 是向左移动图片时的图层，m--like 是向右移动图片时的图层，demo__card__drag 是拖动层。
JavaScript
在代码中，pullChange() 函数用于设置向左和向右两个滑动层的旋转角度和透明度。release() 函数用于判断用户是向左还是向右滑动手指，并为这些动作在DOM元素上添加相应的class。function pullChange() {
& & animating =
& & deg = pullDeltaX / 10;
& & $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
& & var opacity = pullDeltaX / 100;
& & var rejectOpacity = opacity &= 0 ? 0 : Math.abs(opacity);
& & var likeOpacity = opacity &= 0 ? 0 :
& & $cardReject.css('opacity', rejectOpacity);
& & $cardLike.css('opacity', likeOpacity);
}
;
function release() {
& & if (pullDeltaX &= decisionVal) {
& && &&&$card.addClass('to-right');
& & } else if (pullDeltaX &= -decisionVal) {
& && &&&$card.addClass('to-left');
& & }
& & if (Math.abs(pullDeltaX) &= decisionVal) {
& && &&&$card.addClass('inactive');
& && &&&setTimeout(function () {
& && && && &$card.addClass('below').removeClass('inactive to-left to-right');
& && && && &cardsCounter++;
& && && && &if (cardsCounter === numOfCards) {
& && && && && & cardsCounter = 0;
& && && && && & $('.demo__card').removeClass('below');
& && && && &}
& && &&&}, 300);
& & }
& & if (Math.abs(pullDeltaX) & decisionVal) {
& && &&&$card.addClass('reset');
& & }
& & setTimeout(function () {
& && &&&$card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
& && &&&pullDeltaX = 0;
& && &&&animating =
& & }, 300);
}; 复制代码
最后监听 mousedown 和 touchstart 事件，并对非 .inactive 的卡片元素执行卡片切换操作。$(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {
& & if (animating)
& && &&&
& & $card = $(this);
& & $cardReject = $('.demo__card__choice.m--reject', $card);
& & $cardLike = $('.demo__card__choice.m--like', $card);
& & var startX = e.pageX || e.originalEvent.touches[0].pageX;
& & $(document).on('mousemove touchmove', function (e) {
& && &&&var x = e.pageX || e.originalEvent.touches[0].pageX;
& && &&&pullDeltaX = x - startX;
& && &&&if (!pullDeltaX)
& && && && &
& && &&&pullChange();
& & });
& & $(document).on('mouseup touchend', function () {
& && &&&$(document).off('mousemove touchmove mouseup touchend');
& && &&&if (!pullDeltaX)
& && && && &
& && &&&release();
& & });
});复制代码
本帖子中包含更多资源
才可以下载或查看，没有帐号？
设计源的微博：/techued
设计源微信公众号：web-tech
好帖要顶,楼主的头像还是不错滴
设计源的微博：/techued
设计源微信公众号：web-tech
好帖要顶,楼主的头像还是不错滴
设计源的微博：/techued
设计源微信公众号：web-tech
免责声明：本论坛所有文章、软件、图片均由网友发贴上传，包括本站网友原创及部分转贴自互连网,软件及文章的版权属于原作者
如果本站中有内容侵犯了您的版权，请您通知我们的管理员,管理员(Email:)及时取得您的受权或马上删除
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论!
Powered by我的三星i9105p在设置向下滑动时，我手指不动的时候，屏幕老上下跳动_百度知道插件描述：响应式banner，支持移动端手指滑动切换，自定义设置属性
相关插件-幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
讨论这个项目（32）回答他人问题或分享插件使用方法奖励jQ币
这个很棒的
试试 看这样回复有没有奖励
可以 & 很强势
钱包鼓鼓前端开发-晓丹0
加a标签能用吗
空人空城、空心伤0
Dream Show0
怎么用啊~！
我是吕，不是小布3
为什么打开跟demo图不一样呀！
感谢反馈，已经修改正确。
jianghaixiaxia0
可不可以轮播，到最后一张图，再向右按的话，动画是向前的。
技术宅?宅技术?0
好东西!感谢分享
这个换图片怎么弄啊&
不能自动缩放，缩放后比例变形
life like0
哪位好兄弟支持下：
BETTER_MANFORYOU0
柒☆星飘虫々0
问题很多，最右边有个20px左右的边
这么没有无间隙滑动吗
鱼鱼鱼鱼鱼0
不能自动缩放，缩放后比例变形
KevinChyen0
CraZyDoubLe0
季轩老师QQ0
PROMULGATOR
关注作者 (10)
收藏此插件 (102)
我当前jQ币余额：正在获取..
已下载次数：965
所需jQ币：3三星a9怎么用两个手指滑动以解锁屏幕_百度知道播放列表加载中...
正在载入...
分享视频：
嵌入代码：
拍下二维码，随时随地看视频
手指舞特效，三星手机广告前面没有特效的部分
上 传 者：
内容介绍：
手指舞特效，三星手机广告前面没有特效的部分
我来说点啥
版权所有 CopyRight
| 京网文[0号 |
| 京公网安备：
互联网药品信息服务资格证：（京）-非经营性- | 广播电视节目制作经营许可证：（京）字第403号
<img src="" width="34" height="34"/>
<img src=""/>
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img width="132" height="99" src=""/>
在线人数：
<li data-vid="">
<img src=""/><i data-vid="" class="ckl_plays">
<img src="///img/blank.png" data-src=""/>
<img src="///img/blank.png" data-src="http://"/>
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/>
<i data-vid="" class="ckl_plays">
<li data-vid="" class="cfix">
src="///img/blank.png" data-src=""/><i data-vid="" class="ckl_plays">
没有数据！
{upload_level_name}
粉丝 {fans_count}
{video_count}
{description}

我要回帖

更多关于 jquery 手指滑动特效 的文章

 

随机推荐