html5手机触摸全屏滚动效果

来源:https://www.sucaihuo.com/js/1797.html 2017-04-23 17:42浏览(2092) 收藏

html5手机触摸全屏滚动效果,、兼容安卓、苹果等常用设备、原生javascript+html5编写、不依赖jquery库,效果超棒,搞前端开发的童鞋们,你值得拥有哦,还等什么啊,快来下载啊。。。
html5手机触摸全屏滚动效果
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

首先引用

<link rel="stylesheet" type="text/css" href="css/css.css">

判断屏幕是否旋转,图片的列表,禁止拖拽页面图片,滑动事件是否开始,触摸事件。等等

function orientationChange() {
		var _alert=document.getElementById("alert");
		switch(window.orientation) {
		  case 0: 
				_alert.style.display="none";
				break;
		  case -90:
				_alert.style.display="block";
				break;
		  case 90:
				_alert.style.display="block";
				break;
		  case 180:
				_alert.style.display="none";
			  break;
		}
	}
 //绑定事件
		document.addEventListener('mousedown', touchSatrtFunc, false); 	//触摸事件
		document.addEventListener('mousemove', touchMoveFunc, false); 	//滑动事件
		document.addEventListener('mouseup', touchEndFunc, false); 		//离开元素事件
		document.addEventListener('touchstart', touchSatrtFunc, false); 	//触摸事件
		document.addEventListener('touchmove', touchMoveFunc, false); 	//滑动事件
		document.addEventListener('touchend', touchEndFunc, false); 		//离开元素事件
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2