jmSlip/slip.js

一个简单的WEB前端滑动组件

主页:http://jiamao.github.io/jmSlip/

开始

<script src="../../src/jmSlip.js"></script>
<section class="banner js-banner" id="banner">
	<ul>
	<li></li>
	</ul>
</section>
<script>
	var banner = 'banner'; //$('.js-banner');  //可以是id或jquery对象或原生node
	var slip = new jmSlip(banner,'page', {
		direction: 'x',
		repeat: true //这里用平铺
	});
	//窗口改变
    window.onresize = function(){
	    slip.reset();
    };
</script>

参数

1. element 当前组件控制的dom容器。可以是id、jquery对象或原生node对象。
2. type 滑动方式，page、scale、drag等。
3. option 滑动参数。格式

{
    "direction": 'x', //type为page时有效。x:横向滑动，y:纵向滑动
    "onPageStart": function(page){
	}, 
	//翻页结束后执行
	"onPageEnd" : function(oldpage, newpage){}, 
	//滑动开始事件
	"onTouchStart": function(e){
		//return false 阻止
	},
	//滑动中
	"onTouchMove": function(e, offset){
		//return false 阻止
		//offset: {offx:0,offy:0}     移动距离
	},
	//结束滑动
	"onTouchEnd": function(e, offset) {
		//return false 阻止
		//offset: {offx:0,offy:0}     移动距离
	}
}

翻页(page)

按页切换

• 横向翻页：http://jiamao.github.io/jmSlip/demo/page/x.html

var slip = new jmSlip(banner1,'page',{
		//changeTime: 1000, 
		direction: 'x',
		repeat: false,
		//是否循环切换，如果为true，当滑到最后一页后依然会从第一页开始向后滑。如果设为true，最好把repeat也指定为false
		loop: true,
		mousewheel:true,//支持滚轮
		onPageStart: function(page) {
			console.log(page);
			//if(page > 2) return false; //可按条件阻断翻页
		}, //翻页开始前回调，如果返回false则翻页中止
		onPageEnd: function(oldpage, newpage){
			console.log(oldpage);
			console.log(newpage);
			
		} ,//翻页结束回调
		onTouchStart: function(evt){
			console.log(evt);
		}, //滑动开始，返回false中止滑动
		onTouchMove: function(evt, offset){
			evt.preventDefault();
			console.log(evt);
			console.log(offset);//相对于start的位移
		}, //滑动中，返回false中止
		onTouchEnd: function(evt){
			console.log(evt);
		} //滑动结束，返回false中止
	});

• 纵向翻页 http://jiamao.github.io/jmSlip/demo/page/y.html

var slip = new jmSlip('wrap','page',{
	changeTime: 0,
	//是否循环切换，如果为true，当滑到最后一页后依然会从第一页开始向后滑。如果设为true，最好把repeat也指定为false
	loop: true,
	mousewheel:true, //支持滚轮
	onPageStart: function(page) {
		console.log(page);
	}, //翻页开始前回调，如果返回false则翻页中止
	onPageEnd: function(oldpage, newpage){
		console.log(oldpage);
		console.log(newpage);
	} ,//翻页结束回调
	onTouchStart: function(evt){
		console.log(evt);
	}, //滑动开始，返回false中止滑动
	onTouchMove: function(evt, offset){
		evt.preventDefault();
		console.log(evt);
		console.log(offset);//相对于start的位移
	}, //滑动中，返回false中止
	onTouchEnd: function(evt){
		console.log(evt);
	} //滑动结束，返回false中止
});

滚动选中(item)

一排滚动，中心位被选中效果。 示例：http://jiamao.github.io/jmSlip/demo/item/index.html

var slip = new jmSlip('banner','item',{
	//changeTime: 1500, 
	direction: 'x', 
	page: 0, //默认所在项
	duration: 800, //滚动延时
	itemOffWidth: 1, //每个项需要计算的偏移量。一般用作间距
	onTouchStart: function(){
		//$('#banner li.cur').toggleClass('cur',false);
	},
	onTouchMove: function(evt, offset) {
		evt.preventDefault();
		//找到中间项，然后让它滑过中间时放大
		var len = this.instance.containerInner.children.length;		
		var leftwidth = 0;
		var lastoffx = 0;
		var lastindex = 0;
		var mleft = this.instance.container.offsetWidth / 2 - this.offsetX;
		//找到离中间最近的项
		for(var i=0;i<len;i++) {		
			var itemw = this.instance.containerInner.children[i].offsetWidth; 			
			leftwidth += itemw;
			var c = leftwidth - itemw / 2;
			if(c >= mleft) {
				var curoffx = Math.abs(c - mleft);
				if(lastindex != i) {
					var sc = Math.max((1-lastoffx / itemw),0) * 0.2 + 0.8;
					$('#banner li').eq(lastindex).css('transform', 'scale3d('+sc+', '+sc+', 1)');
				}
				var sc = Math.max((1 - curoffx / itemw),0) * 0.2 + 0.8;
				$('#banner li').eq(i).css('transform', 'scale3d('+sc+', '+sc+', 1)');
				break;
			}
			//离项中间的距离
			lastoffx = Math.abs(mleft - c);
			lastindex = i;
		}	
	},
	onPageStart: function(p) {
		//限制这跳到第三个项，超过注返回第三个
		/*if(p > 2) {
			this.go(2);
			return false;
		}*/
	},
	onPageEnd: function(oldPage,newPage) {		
		setTimeout(function(){
			$('#banner li.cur').toggleClass('cur',false);
			$('#banner li').eq(newPage).toggleClass('cur',true);
		},100);		
	}
});

缩放(scale)

主要用于图片的缩放操作 示例：https://jiamao.github.io/jmSlip/demo/scale/index.html

var slip = new jmSlip(container, 'scale', {
        target: container.find('img')[0], //被操作的img对象
        supportTranslate: true,//是否支持移动
        maxScale: 4, //最大放大4倍
        minScale: 0.1, //最小缩小到10%
        onTouchMove: function(e){
            //if(e.offsetPos.length == 2)container.append(JSON.stringify(e.offsetPos));
        },
        onScaleStart: function(per, e) {
            container.append('scale:' + per + '<br />');
        }
    });

拖放(drag)

拖放对象，可以做一些贴边操作 示例：https://jiamao.github.io/jmSlip/demo/drag/index.html

var entry = $('.act-enter');
var slip = new jmSlip(entry,'drag', {
	onTouchStart: function(e){
      e && e.preventDefault && e.preventDefault();//阻止默认响应
    },
	dragEnd: function() {	
		var offx = this.offsetX;//当前偏移量
		var offy = this.offsetY;

		var posw = entry.offset().left + entry.width() / 2;
		var winw = $(window).width();
		//如果偏左的话，则定到左侧
		if(posw <= winw / 2) {
			offx -= entry.offset().left;           
		}
		else {
			offx += winw - posw - entry.width() / 2;  
		}
		//粘到左右边上
		this.move(offx, offy);
	}
});

滚动(scroll)

跟原生滚动条类似 示例：http://jiamao.github.io/jmSlip/demo/scroll/index.html

列表操作项：http://jiamao.github.io/jmSlip/demo/scroll/scroll_item.html