深圳网站建设、深圳建网站、网站建设公司定制属于您的高端个性化网站!

搜索深圳网站建设相关案例及相关信息 服务热线:13530005572/15112579390
首页 > 网站建设知识 > 独占网络Jquery手机版图片滚动的插件

独占网络Jquery手机版图片滚动的插件

  • 所属分类:网站建设知识
  • 作者: 独占网络
  • 更新时间: 2015-2-9 11:18:18
  • 返回列表
先我们以前写的滚动图片的插件都是不能在手机上滑动的,但是我们独占网络书写的jquery是可以在手机上面的滑动的。
下面是我们代码的原理,先我们需要写一个封装的插件来完成这个方法
(function ($) {
    $.fn.DuZhanBanner = function (options) {
     }
})(jQuery)
那么其实我们手机滑动事件我们需要用到jquery.mobile.js,由于引入jquery.mobile.js会引入许多没有必要的问题,解决问题请访问 我们使用jquery.mobile.js需要注意的问题(http://www.sz886.com/zhishi/112129.html)
那我们下面就讲一下主要就这几个关键的知识,先就是touchstart就是滑动手机屏幕的开始性事件,那我们先需要做的就是在这个事件加入我们记录事件,因为我们需要滑动开始的坐标,我们下面才好判断滑动的时候是向左还是向右,那我们下来要讲的就是touchmove移动事件,这个事件主要是用于得到手指在屏幕上面的滑动事件,这个方法我们主要是要记录手机滑动的方法还有手指滚动的距离,这个方法我们主要是需要让图片跟着手机滑动效果跟着一起滑动,这样我们就可以需要滑动,接下来就是后一个方法touchend滑动放开的事件,这个方法就要是手指滑动后放开的事件,那我们需要注意的就是手指在滑动屏幕的时候,一般都不能让整个图片滑动完成,所以我们需要在这个时候让整个图片滑动到完整,可完整的显示图片的信息,还有一个问题就是这些事件都是需要配合jquery里面的滚动方法去完成的。
其实讲了这么多,大家可以都希望看到代码,还是网页的显示效果,还有手机屏幕的滑动效果,其实完整的代码已经在独占网络官网http://www.sz886.com)上面已经可以显示,大家可以上独占网络官网去看效果。

相关推荐

独占网络

专业开发/高端制作

您值得信任的网站建设专家!

为其提供系统的基于互联网的品牌行销策略 、 创意执行 、 追踪运营服务 。