jQuery实现的手机手指滑动切换图片特效源码.zip资源-CSDN文库

共11个文件

css：3个

js：2个

ttf：1个

版权申诉

110 浏览量 2022-11-07 00:24:02 上传评论收藏 66KB ZIP 举报

《jQuery实现的手机手指滑动切换图片特效》在移动设备普及的今天，网页交互体验对用户至关重要，尤其是在展示图片时。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供了许多便利，使得在手机上实现手指滑动切换图片的特效变得简单易行。本文将深入探讨如何使用jQuery实现这一功能。我们需要理解jQuery的核心概念。jQuery简化了DOM操作，事件处理，动画效果和Ajax交互。在实现滑动切换图片特效中，我们主要利用的是它的事件处理和动画效果。 1. **事件处理**：在手机上，主要关注的是`touchstart`、`touchmove`和`touchend`这三个触摸事件。`touchstart`是手指触摸屏幕时触发，`touchmove`表示手指在屏幕上移动时触发，而`touchend`则是在手指离开屏幕时触发。通过监听这些事件，我们可以捕捉用户的滑动行为，判断滑动方向并执行相应的图片切换。 2. **图片容器和数据结构**：为了实现滑动切换，通常我们需要一个包含所有图片的容器，每个图片作为子元素。同时，我们需要一个数组或者对象来存储图片的索引或引用，以便于在滑动时动态更新显示的图片。 3. **动画效果**：jQuery提供了`.animate()`方法，可以平滑地改变HTML元素的CSS属性，如位置、透明度等。在滑动切换图片时，我们可以利用这个方法来创建过渡效果，让图片在手指滑动时流畅地切换。 4. **计算滑动距离和判断方向**：在`touchmove`事件中，我们需要获取到开始和结束时的触摸点坐标，通过比较这两个坐标来计算滑动的距离和方向。如果滑动距离超过一定阈值，并且滑动方向符合切换条件（通常是水平方向），就触发图片切换。 5. **切换逻辑**：根据滑动的方向和当前显示的图片索引，确定下一张要显示的图片。如果是向右滑动，那么显示下一个索引的图片；反之，显示上一个索引的图片。同时，要确保不会超出图片数组的范围。 6. **防止默认滚动行为**：在手机上，滑动通常会触发页面的滚动，为了避免这种情况，我们需要在`touchmove`事件中阻止其默认行为，通过`event.preventDefault()`来实现。 7. **性能优化**：由于手机设备的性能限制，我们应该尽可能减少不必要的计算和DOM操作。例如，可以通过缓存图片的尺寸和位置，避免在每次滑动时都进行计算。总结来说，利用jQuery实现手机手指滑动切换图片特效，需要结合事件监听、DOM操作、动画效果以及适当的逻辑判断。这一过程既考验开发者对jQuery API的理解，也要求对移动设备特性有深入认识。通过实践和优化，我们可以创建出流畅、用户体验优秀的图片滑动效果。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现的手机手指滑动切换图片特效源码.zip （11个子文件）

132677977803417737

css

default.css 6KB

styles.css 4KB

normalize.css 2KB

img

udTln22.png 25KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 6KB

stopExecutionOnTimeout.js 2KB

jquery-2.1.1.min.js 82KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery手机手指滑动切换图片特效</title> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <article class="htmleaf-container"> <div class="demo"> <header class="demo__header"></header> <div class="demo__content"> <div class="demo__card-cont"> <div class="demo__card"> <div class="demo__card__top brown"> <div class="demo__card__img"></div> <p class="demo__card__name">Hungry cat 6</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> <div class="demo__card"> <div class="demo__card__top lime"> <div class="demo__card__img"></div> <p class="demo__card__name">Hungry cat 5</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> <div class="demo__card"> <div class="demo__card__top cyan"> <div class="demo__card__img"></div> <p class="demo__card__name">Hungry cat 4</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> <div class="demo__card"> <div class="demo__card__top indigo"> <div class="demo__card__img"></div> <p class="demo__card__name">Hungry cat 3</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> <div class="demo__card"> <div class="demo__card__top blue"> <div class="demo__card__img"></div> <p class="demo__card__name">Hungry cat 2</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> <div class="demo__card"> <div class="demo__card__top purple"> <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> </div> <p class="demo__tip">Swipe left or right</p> </div> </div> </article> <script src='js/stopExecutionOnTimeout.js?t=1'></script> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script> $(document).ready(function () { var animating = false; var cardsCounter = 0; var numOfCards = 6; var decisionVal = 80; var pullDeltaX = 0; var deg = 0; var $card, $cardReject, $cardLike; function pullChange() { animating = true; 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 : opacity; $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 = false; }, 300); }; $(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) { if (animating) return; $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) return; pullChange(); }); $(document).on('mouseup touchend', function () { $(document).off('mousemove touchmove mouseup touchend'); if (!pullDeltaX) return; release(); }); }); }); </script> <div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉