位置: 编程技术 - 正文
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）(jquery.handleerror)
编辑：rootadmin推荐整理分享jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）(jquery.handleerror)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery与js,jquery实战,jquery和html的关系,jquery与js,jquery.handleerror,jquery和html的关系,jquery和html的关系,jquery实例,内容如对您有帮助，希望把文章链接给更多的朋友！
今天我们继续内容滑动切换效果的第二部分讲解。如今我们的web开发都要适应移动设备，就是说我们的web页面要在移动设备如手机端也能正常访问，所以我将第一部分的基本切换效果做了加强，增加了响应式和触控滑动效果。
效果展示 源码下载
本文是hwSlider-内容滑动切换效果的第二部分，演示DEMO都是基于第一部分内容的基础上的，所以，如果您还没阅读过第一部分的话，请先移步参阅：基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）
响应式
什么是响应式设计，这里我就不描述了。在hwSlider中，我们通过CSS来设置滑块的宽度和高度，设置了百分比的宽度。
接下来，我们在js部分开始部分定义变量，在初始化resize()函数中，我们计算并定位导航圆点和导航箭头的位置，并且在浏览器窗口大小调整的时候也调用resize()。
移动端触屏滑动
在移动设备上，我们可以轻触屏幕，并使用手势滑动来切换滑块。要实现这种效果，需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件：
touchstart: 手指放到屏幕上时触发touchmove: 手指在屏幕上滑动式触发touchend: 手指离开屏幕时触发touchcancel: 系统取消touch事件的时候触发，这个好像比较少用
好，现在我们需要在滑块上绑定侦听touch触控事件，在touchstart和touchend时分别获取手指在屏幕滑块上的位置，然后根据位移判断是左滑还是右滑，然后调用moveTo()实现滑动切换。
再加上上一篇文章中的基本滑块js代码就能实现一个响应式的可触控滑动的内容滑动效果。
如果要在PC上实现拖动滑动的话，需要绑定滑块的onmousedown，onmousemove以及onmouseup事件，实现鼠标按住拖动滑块实现滑动切换，主要代码这里就不贴出来了，大家可以下载源代码中查看。
接下来的第三部分，我将给大家讲解如何将现有的hwSlider代码封装成一个jQuery滑动插件成品，敬请关注。
jQuery UI结合Ajax创建可定制的Web界面 如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如iGoogle、MyYahoo!和MyAOL）日渐
浅谈jquery中的each方法$.each、this.each、$.fn.each jquery.each方法方法一$("img").each(function(i,elem){//i下标从零开始，//elem==this//$(elem).toggleClass("example");$(this).toggleClass("example");});方法二$.each([1,2,3,4],function(){//$
jQuery实现查找最近父节点的方法 本文实例讲述了jQuery实现查找最近父节点的方法。分享给大家供大家参考，具体如下：这里演示查找当前控件最近的tablehtmlheadtitleusuallyfunction/title/headbod
上一篇：基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）(基于jQuery和Bootstrap的设计报告的参考文献)
下一篇：jQuery UI结合Ajax创建可定制的Web界面
