swipe.js触屏手指滑动图片预览特效



81 321 108



特效描述:swipe.js触屏 手指滑动 图片预览特效,swipe.js通过滑动块来移动背景大图,只限于移动端使用,可全方向、X轴,Y轴移动,适用于制作时间轴类效果

代码结构

1. 引入JS

<script src="js/swipe.min.js"></script>
<script src="js/swipe.min.js"></script>

2. HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" ontouchmove="event.preventDefault()" />
<title>移动端,滑块看全图</title>
<style>
body,html{width:100%;height:100%;overflow:hidden;margin:0;padding:0;font-size:65%}
#wrap{ display:block;width:300px;height:300px; position:relative;margin:10px;overflow:hidden;font-size:1em;}
#background{width:740px;height:555px; background:url(saber111.jpg) no-repeat center center/100% 100%; position:absolute;left:0;top:0;z-index:1;}
pre{padding:0 1em;}
</style>
</head>
<body ontouchmove="event.preventDefault()">
<div id="wrap">
</div>
<pre>
<code>
var zoom = new zoomDrop({
	wrap : document.getElementById('wrap'), //布局主体
	obj : 'saber111.jpg', //被放大的图片(背景图)
	//swipeClass : 'swipe',//滑动块样式,可不设置
	direction : 0 //方向 0:全方位   1 : x轴   2 : y轴, 默认:0
})
zoom.init(function(v){
	//返回:
	//v = {
	//	swipeLeft : 0, //滑块左边距
	//	swipeTop : 0, //滑块右边距
	//	objLeft : 0, //大图左边距
	//	objTop : 0 //大图右边距
	//}
	console.log(v)
});
</code>
</pre>
<script>
var zoom = new zoomDrop({
	wrap : document.getElementById('wrap'), //布局主体
	obj : 'saber111.jpg', //被放大的图片(背景图)
	//swipeClass : 'swipe',//滑动块样式,可不设置
	direction : 0 //方向 0:全方位   1 : x轴   2 : y轴, 默认:0
})
zoom.init(function(v){
	//返回:
	//v = {
	//	swipeLeft : 0, //滑块左边距
	//	swipeTop : 0, //滑块右边距
	//	objLeft : 0, //大图左边距
	//	objTop : 0 //大图右边距
	//}
	console.log(v)
});
</script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 其他 预览

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到