JS实现滑动插件
本文实例为大家分享了JS实现滑动插件的具体代码,供大家参考,具体内容如下
基本思路是封装一个Slider类,拥有默认初始配置参数。
Slider.prototype(原型链上)拥有实现滑动的方法,通过监听手势,实现滑动的效果。
比较复杂的滑动效果,可以使用Swiper.js来实现。
/*PollyFillforiOS5.**/ if(!Function.prototype.bind){ Function.prototype.bind=function(oThis){ varargs=Array.prototype.slice.call(arguments,1) varf2bind=this varfnop=function(){} varbound=function(){ returnf2bind.apply(thisinstanceoffnop&&oThis ?this :oThis, args.concat(Array.prototype.slice.call(arguments))) } fnop.prototype=this.prototype bound.prototype=newfnop() returnbound } } //添加浏览器前缀 functionprefix(style){ varvendor=(function(){ vartransArr=['transform','webkitTransform','MozTransform','msTranform','OTransform'], vendors=['','webkit','Moz','ms','O'], elementStyle=document.createElement('div').style for(vari=0;i0)||(currentIdx==this._total&&moveDist<0)){ returnthis.slide($current,moveDist/4) } leave($current,moveDist) } }, _end:function(e){ varmove=this._moveDist, distance=this._distance, triggleDist=this.options.triggleDist, enter=this._enter, $current=this.pages[this.options.currentIdx], $next=$current.nextElementSibling, $prev=$current.previousElementSibling this._touching=false this._enter($current,0) $next&&enter($next,distance) $prev&&enter($prev,-distance) if($next&&move<-triggleDist&&this.hook.shouldGoToNext($current))returnthis._next() if($prev&&move>triggleDist&&this.hook.shouldGoToPrev($current))returnthis._prev() }, _next:function(){ this.go2page(this.options.currentIdx+1) }, _prev:function(){ this.go2page(this.options.currentIdx-1) }, go2page:function(idx){ var$current=this.pages[this.options.currentIdx], $target=this.pages[idx], enter=this._enter, leave=this._leave, distance=(idx 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。