jquery滑动触屏代码资源-CSDN文库

共73个文件

html：21个

jpg：15个

png：15个

5星 · 超过95%的资源需积分: 3 12 浏览量 2014-04-23 10:32:16 上传评论 3 收藏 1.26MB ZIP 举报

在IT行业中，jQuery是一款非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。标题“jquery滑动触屏代码”指出，我们要讨论的是使用jQuery来实现触屏设备上页面内容的滑动功能，特别是针对移动浏览器。描述中提到的“左右滑动代码支持触屏的移动浏览器，鼠标拖拽，页面随鼠标移动速度滑动屏幕”，进一步阐述了这个功能不仅适用于触摸操作，还兼容鼠标拖拽，并且可以根据用户的滑动速度调整页面滚动的流畅度。实现这样的功能，首先我们需要引入jQuery库到项目中。这通常通过在HTML文件的头部添加CDN链接或本地引入jQuery.js文件来完成。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，我们需要编写JavaScript代码来监听触屏和鼠标事件。对于触屏设备，我们可以使用`touchstart`, `touchmove`, 和 `touchend`事件。对于鼠标用户，我们则关注`mousedown`, `mousemove`, 和 `mouseup`事件。为了兼容两种设备，我们需要在事件处理器中进行相应的逻辑判断。以下是一个简化的示例，展示了如何实现滑动功能： ```javascript $(document).ready(function() { var startX, endX; // 触屏事件监听 $(document).on('touchstart', function(event) { startX = event.originalEvent.touches[0].clientX; }); $(document).on('touchmove', function(event) { endX = event.originalEvent.touches[0].clientX; // 计算滑动距离 var distance = startX - endX; // 根据滑动距离改变页面滚动位置 $('body').scrollLeft($('body').scrollLeft() - distance); }); // 鼠标事件监听 $(document).on('mousedown', function(event) { startX = event.clientX; }); $(document).on('mousemove', function(event) { endX = event.clientX; // 计算滑动距离 var distance = startX - endX; // 根据滑动距离改变页面滚动位置 $('body').scrollLeft($('body').scrollLeft() - distance); }); $(document).on('mouseup', function() { startX = null; }); // 添加鼠标滚轮事件，根据滚动速度调整滑动速度 $(document).on('wheel', function(event) { var delta = event.deltaY; // 滚动的距离 var speed = Math.abs(delta) * 2; // 增加速度 $('body').animate({ scrollLeft: $('body').scrollLeft() - (delta > 0 ? speed : -speed) }, 200); // 动画时间可以调整 }); }); ``` 这段代码的核心是计算鼠标或手指滑动的距离，并相应地更新页面的滚动位置。对于鼠标滚轮事件，我们可以通过检测滚动的增量（delta）来调整滑动的速度，让页面滚动更符合用户的操作习惯。在实际应用中，可能还需要考虑其他因素，如防止快速滑动时的过度滚动、滑动的最小和最大限制、滑动动画的平滑性等。此外，为了优化性能，可能需要使用事件节流或防抖函数来限制事件处理器的执行频率。标签“触屏移动”提醒我们，这样的功能在移动设备上的用户体验尤为重要。因此，在开发过程中，应确保在不同尺寸和操作系统上的设备上进行充分的测试，以确保良好的兼容性和响应性。至于“不错的图片滚动效果”，这可能是指在页面中实现图片轮播或滚动展示的效果。可以使用jQuery插件如`owl.carousel`或`swiper.js`来实现，这些插件提供了丰富的选项和动画效果，可以方便地创建出专业级别的图片滚动展示。实现“jquery滑动触屏代码”涉及到对触屏和鼠标事件的监听、滑动距离的计算、页面滚动的控制以及可能的性能优化和用户体验调整。通过这种方式，我们可以为用户提供更加自然和直观的交互体验，无论他们是在触屏设备还是传统鼠标设备上浏览网页。

资源推荐

资源详情

资源评论

收起资源包目录

.zip （73个子文件）

不错的图片滚动效果

index.html 30KB

demos

one.html 9KB

lazyLoad.html 12KB

progressBar.html 13KB

scaleup.html 10KB

transitions.html 10KB

click.html 11KB

custom.html 13KB

sync.html 18KB

navOnTop2.html 10KB

json.html 10KB

json

.DS_Store 6KB

customData.json 423B

data.json 822B

assets

fullimage6.jpg 116KB

fullimage5.jpg 104KB

fullimage2.jpg 146KB

owl1.jpg 26KB

fullimage7.jpg 102KB

owl6.jpg 20KB

fullimage3.jpg 152KB

owl2.jpg 57KB

owl7.jpg 28KB

fullimage1.jpg 160KB

owl3.jpg 36KB

owl8.jpg 21KB

owl5.jpg 34KB

owl4.jpg 27KB

fullimage4.jpg 50KB

manipulations.html 14KB

navOnTop.html 12KB

itemsCustom.html 12KB

one_a.html 2KB

customJson.html 10KB

owlStatus.html 14KB

images.html 10KB

autoHeight.html 10KB

full.html 10KB

randomOrder.html 13KB

owl-carousel

owl.carousel.js 39KB

AjaxLoader.gif 1KB

owl.theme.css 2KB

grabbing.png 116B

owl.carousel.min.js 15KB

owl.carousel.css 6KB

assets

img

glyphicons-halflings.png 12KB

AjaxLoader.gif 755B

demo-slides

touch.png 3KB

controls.png 3KB

modern.png 8KB

css3.png 8KB

zombie.png 6KB

multi.png 2KB

feather.png 4KB

tons.png 4KB

grab.png 3KB

responsive.png 2KB

glyphicons-halflings-white.png 9KB

glyphicons-halflings-green.png 15KB

owl-logo.png 9KB

application.js 650B

jquery-1.9.1.min.js 90KB

bootstrap-collapse.js 5KB

google-code-prettify

prettify.css 687B

prettify.js 13KB

run_prettify.js 16KB

bootstrap-tab.js 4KB

bootstrap-transition.js 2KB

css

bootstrapTheme.css 4KB

custom.css 7KB

responsive.css 23KB

xw素材.htm 64B

更多素材.url 186B

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery国外强大的鼠标拖动图片滚动切换特效-psd素材网</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'> <link href="assets/css/bootstrapTheme.css" rel="stylesheet"> <link href="assets/css/custom.css" rel="stylesheet">  <link href="owl-carousel/owl.carousel.css" rel="stylesheet"> <link href="owl-carousel/owl.theme.css" rel="stylesheet">  <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="assets/ico/favicon.png"> </head> <body> <div id="demo"> <div class="container"> <div class="row"> <div class="span12"> <h1>Demo</h1> </div> </div> <div class="row"> <div class="span12"> <div id="owl-example" class="owl-carousel"> <div class="item darkCyan"> <img src="assets/img/demo-slides/touch.png" alt="Touch"> <h3>Touch</h3> <h4>Can touch this</h4> </div> <div class="item forestGreen"> <img src="assets/img/demo-slides/grab.png" alt="Grab"> <h3>Grab</h3> <h4>Can grab this</h4> </div> <div class="item orange"> <img src="assets/img/demo-slides/responsive.png" alt="Responsive"> <h3>Responsive</h3> <h4>Fully responsive!</h4> </div> <div class="item yellow"> <img src="assets/img/demo-slides/css3.png" alt="CSS3"> <h3>CSS3</h3> <h4>3D Acceleration.</h4> </div> <div class="item dodgerBlue"> <img src="assets/img/demo-slides/multi.png" alt="Multi"> <h3>Multiply</h3> <h4>Owls on page.</h4> </div> <div class="item skyBlue"> <img src="assets/img/demo-slides/modern.png" alt="Modern Browsers"> <h3>Modern</h3> <h4>Browsers Compatibility</h4> </div> <div class="item zombieGreen"> <img src="assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones"> <h3>Zombie</h3> <h4>Browsers Compatibility</h4> </div> <div class="item violet"> <img src="assets/img/demo-slides/controls.png" alt="Take Control"> <h3>Take Control</h3> <h4>The way you like</h4> </div> <div class="item yellowLight"> <img src="assets/img/demo-slides/feather.png" alt="Light"> <h3>Light</h3> <h4>As a feather</h4> </div> <div class="item steelGray"> <img src="assets/img/demo-slides/tons.png" alt="Tons of Opotions"> <h3>Tons</h3> <h4>of options</h4> </div> </div> </div> </div> </div> </div> <div id="more-demos"> <div class="container"> <div class="row"> <div class="span12"> <h1>More Demos</h1> <h2>Awesome!</h2> <p>Check more demos here! See what Owl can do.</p> </div> </div> <div class="row demos-row"> <div class="span3"> <a target="_blank" href="demos/images.html" class="demo-box"> <div class="demo-wrapper demo-images clearfix"> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> </div> <h3>Images</h3> </a> </div> <div class="span3"> <a target="_blank" href="demos/custom.html" class="demo-box"> <div class="demo-wrapper demo-custom clearfix"> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> </div> <h3>Custom</h3> </a> </div> <div class="span3"> <a target="_blank" href="demos/itemsCustom.html" class="demo-box"> <div class="demo-wrapper demo-full clearfix"> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> </div> <h3>Custom 2</h3> </a> </div> <div class="span3"> <a target="_blank" href="demos/one.html" class="demo-box"> <div class="demo-wrapper demo-one clearfix"> <div class="demo-slide"> <div class="bg"></div> </div> </div> <h3>One Slide</h3> </a> </div> </div> <div class="row demos-row"> <div class="span3"> <a target="_blank" href="demos/json.html" class="demo-box"> <div class="demo-wrapper demo-Json clearfix"> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> </div> <h3>JSON</h3> </a> </div> <div class="span3"> <a target="_blank" href="demos/customJson.html" class="demo-box"> <div class="demo-wrapper demo-Json-custom clearfix"> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> </div> <h3>JSON Custom</h3> </a> </div> <div class="span3"> <a target="_blank" href="demos/lazyLoad.html" class="demo-box"> <div class="demo-wrapper demo-lazy clearfix"> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> <div class="demo-slide"> <div class="bg"></div> </div> </div> <h3>Lazy Load</h3> </a> </div> <div class="span3"> <a target="_blank" href="demos/autoHeight.html" class="demo-box"> <div class="demo-wrapper demo-height clearfix"> <div class="demo-slide"> <div class="bg"></div>

评论收藏

内容反馈