swipe.js觸屏手指滑動圖片預覽特效



84 335 112



特效描述: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

加群請備注:從官網了解到

老夫子电子