仿移动端触摸滑动插件swiper,的简单实现

?
/**
 * @author lyj
 * @Date 2016-02-04
 * @Method 滑动方法  针对一个大容器内部的容器做滑动封装
 * @param
 * args args.swipeDom 大容器对象
 * args.swipeType 滑动类型
 * args.swipeDistance 缓冲距离
 * 注意:子容器的高宽度是取的内容的高宽 所以padding的大小有影响
 */
if(!window.itlyj){
    window.itlyj = {};
}
itlyj.iScroll = function(args){
    /*调用的时候没有初始化的话就是初始化一次*/
    if(!(this instanceof arguments.callee)) return new arguments.callee(args);
    this.init(args);
};
itlyj.iScroll.prototype = {
    constructor:itlyj.iScroll,
    init:function(args){
        /*局部变量来接受当前的this*/
        var that  = this;
        /*如果传入的对象是一个Dom对象就把他看作是我们的大容器盒子*/
        if(args.swipeDom && typeof  args.swipeDom == ‘object‘){
            that.parentDom = args.swipeDom;
        }
        /*如果不存在父容器就停止初始化*/
        if(!that.parentDom) return false;
        /*找到子容器*/
        that.childDom = that.parentDom.children&&that.parentDom.children[0]?that.parentDom.children[0]:‘‘;
        /*如果不存在子容器就停止初始化*/
        if(!that.childDom) return false;
        /*初始化传入的参数*/
        that.settings = {};
        /*默认类型  默认的Y轴滑动 如果不是y的话就是以x轴开始滑动*/
        that.settings.swipeType = args.swipeType?args.swipeType:‘y‘;
        /*默认的缓冲滑动距离*/
        that.settings.swipeDistance = args.swipeDistance>=0?args.swipeDistance:150;
        /*初始化滑动*/
        that._scroll();
    },
    /*对外开放的设置定位的方法*/
    setTranslate:function(translate){
        this.currPostion = translate;
        this._addTransition();
        this._changeTranslate(this.currPostion);
    },
    _addTransition:function(){
        this.childDom.style.transition = "all .2s ease";
        this.childDom.style.webkitTransition = "all .2s ease";/*兼容 老版本webkit内核浏览器*/
    },
    _removeTransition:function(){
        this.childDom.style.transition = "none";
        this.childDom.style.webkitTransition = "none";/*兼容 老版本webkit内核浏览器*/
    },
    _changeTranslate:function(translate){
        if(this.settings.swipeType == ‘y‘){
            this.childDom.style.transform = "translateY("+translate+"px)";
            this.childDom.style.webkitTransform = "translateY("+translate+"px)";
        }else{
            this.childDom.style.transform = "translateX("+translate+"px)";
            this.childDom.style.webkitTransform = "translateX("+translate+"px)";
        }
    },
    _scroll:function(){
        /*局部变量来接受当前的this*/
        var that = this;
        /*滑动的类型*/
        var type = that.settings.swipeType == ‘y‘?true:false;
        /*父容器的高度或宽度*/
        var parentHeight = type?that.parentDom.offsetHeight:that.parentDom.offsetWidth;
        /*子容器的高度或宽度*/
        var childHeight = type?that.childDom.offsetHeight:that.childDom.offsetWidth;

        /*子容器没有父容器大的时候*/
        if(childHeight < parentHeight){
            if(type){
                that.childDom.style.height = parentHeight + ‘px‘;
                childHeight = parentHeight;
            }else{
                that.childDom.style.width = parentHeight + ‘px‘;
                childHeight = parentHeight;
            }
        }

        /*缓冲距离*/
        var distance = that.settings.swipeDistance;
        /*区间*/
        /*左侧盒子定位的区间*/
        that.maxPostion = 0;
        that.minPostion = -(childHeight-parentHeight);
        /*设置滑动的当前位置*/
        that.currPostion = 0;
        that.startPostion = 0;
        that.endPostion = 0;
        that.movePostion = 0;
        /*1.滑动*/
        that.childDom.addEventListener(‘touchstart‘,function(e){
            /*初始的Y的坐标*/
            that.startPostion = type?e.touches[0].clientY: e.touches[0].clientX;
        },false);
        that.childDom.addEventListener(‘touchmove‘,function(e){
            e.preventDefault();
            /*不停的做滑动的时候记录的endY的值*/
            that.endPostion = type?e.touches[0].clientY: e.touches[0].clientX;
            that.movePostion = that.startPostion - that.endPostion;/*计算了移动的距离*/

            /*2.滑动区间*/
            /*就是滑动区间*/
            if((that.currPostion-that.movePostion)<(that.maxPostion+distance)
                &&
                (that.currPostion-that.movePostion)>(that.minPostion -distance)){
                that._removeTransition();
                that._changeTranslate(that.currPostion-that.movePostion);
            }
        },false);
        window.addEventListener(‘touchend‘,function(e){
            /*在限制滑动区间之后 重新计算当前定位*/
            /*判断是否在我们的合理定位区间内*/
            /*先向下滑动 */
            if((that.currPostion-that.movePostion) > that.maxPostion){
                that.currPostion = that.maxPostion;
                that._addTransition();
                that._changeTranslate(that.currPostion);
            }
            /*想上滑动的时候*/
            else if((that.currPostion-that.movePostion) < that.minPostion){
                that.currPostion = that.minPostion;
                that._addTransition();
                that._changeTranslate(that.currPostion);
            }
            /*正常的情况*/
            else{
                that.currPostion = that.currPostion-that.movePostion;
            }
            that._reset();
        },false);

    },
    _reset:function(){
        var that = this;
        that.startPostion = 0;
        that.endPostion = 0;
        that.movePostion = 0;
    }
};

?

  

时间: 2024-10-03 02:17:13

仿移动端触摸滑动插件swiper,的简单实现的相关文章

移动端触摸滑动插件Swiper

移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载任何公共库(如jQuery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加载了公共库的环境下安全的动行,如jQuery,Zepto,jQuery Moblie等. 2.Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例. 3.Swiper 增加

移动端触摸滑动插件Swiper使用指南极吉林快三带红黑玩法

首先我们需要下载Swiper的相关文件:吉林快三带红黑玩法 下载地址 QQ2952777280 我们可以直接从Github代码仓库中下载. 或者通过Bower下载: $ bower install swiper或者使用Atmosphere将Swiper制作成Meteor包: $ meteor add nolimits4web:swiper或者使用NMP(JavaScript包管理工具)下载: $ npm install swiper下载压缩包后解压,我们需要用到的js文件和css文件都在dist

移动端触摸滑动插件swipe.js

插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动前端开发中. 使用方法 下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可. <div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div>

web移动端触摸滑动事件

web移动端触摸事件的范例~~~ 注意:1.如果不是内联元素,获取style的属性值前需先赋值~不然为Null. 2.亲测andriod 手机 MX4内置浏览器运行妥妥的~~但是微信浏览器并不支持~原因未找到. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

移动端左右滑动插件

前几天决定写一个基于jQuery的移动端大跨度滑动插件,大致可以设置的参数有: num: 3, //Wrap内子元素个数, >0 index: 0, //初始化索引值 initX: 10, //X轴滑动大于此属性触发事件 U.px limitX: 30, //X轴滑动大于此属性触发滑动 U.px limitY: 70, //Y轴滑动大于些属性禁止滑动 U.px speed: 300, //滚屏速度, 值越大越慢 U.ms [>=0 && <=1] edgeSlideVal

移动端滑动插件 swiper

swiper.js能适用于用PC网页,也能使用移动端页面,之前用TouchSwipe,感觉没有swiper.js强大,TouchSwipe有一个bug,在滑动区域有连接的时候(大面积的a),默认点击会无效,只能滑动,即时用jq去模拟点击也是失效的,也许是自己没有发现正确使用方法,求问度娘,发现swiper神器... 下面放上代码, //滑动效果 var swiper = new Swiper('.swiper-container', { pagination: '.swiper-paginati

Html5 移动端 触摸滑动事件

以下代码经过测试  没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chr

Touch Punch在移动设备上面增加jQuery UI的触摸支持|Jquery UI 支持移动端 触摸滑动等

jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipad,iphone和 Android上并不能正常工作.因为jQuery UI监听的是mouseover,mousemove和mouseout事件,不是触摸事件,touchstart,touchmove和 touched. 为了解决这个问题,这里我们介绍jQuery UI Touch Punch类库,它

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是基于jquery的,虽然稍作修改就可以用于移动端,但不能实现触摸上下翻滚.所以就去了zepto的官网查看其API,却发现如果要使用zepto的swipe()方法,需要引用其已经封装好的touch.js文件,我就赶紧引用了这个js文件,可在实际测试中,官网给出的touch.js文件