位置: 编程技术 - 正文
推荐整理分享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的设计报告的参考文献)
友情链接: 武汉网站建设