移动端-常见特效

移动端-常见特效

1.classList属性

classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换CSS类。有以下方法

添加类∶

element.classList.add (’类名’）;

focus.classList.add ( 'current" ) ;

移除类∶

element.classList.remove ( ’类名’);

切换类∶

element.classList.toggle (’类名’);

<div class="one two"></div>
<script>
	// classList返回元素的类名
	var div = document.querySelector( 'div ' );l / 				console.log(div.classList[1]);
	// 1．添加类名是在后面追加类名不会覆盖以前的类名注意前面不需要		加.div.classList.add( ' three ' );
	// 2．删除类名
	div.classList.remove( 'one ' );
	// 3．切换类
	var btn = document.queryselector( ' button ' );
	btn.addEventListener( 'click ' , function() {
	//当点击按钮时，body没有bg类名则添加bg类名到body上，body背景颜色变为黑色
	//当点击按钮button时，body有bg类名则移除该类名，背景为默认颜色
	document.body.classList.toggle( 'bg'); 
	})
</ script>

2.click延时解决方案

移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放(double tap to zoom)页面。解决方案︰

1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。

<meta name="viewport" content="user-scalable=no">

2.利用touch事件自己封装这个事件解决300ms延迟。

原理就是∶

1.当我们手指触摸屏幕，记录当前触摸时间

2.当我们手指离开屏幕，用离开的时间减去触摸的时间

3.如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

//封装tap，解决click 300ms 延时
function tap (obj, callback){
	var isMove = false;
	var startTime = 0; //记录触摸时候的时间变量
	obj.addEventListener ( 'touchstart ', function (e) {
		startTime = Date.now () ; //记录触摸时间
	});
	
	obj.addEventListener ( 'touchmove' , function (e){
		isMove = true;//看看是否有滑动，有滑动算拖拽，不算点击
	});
	
	obj.addEventListener ( 'touchend ' , function (e) {
		//如果手指触摸和离开时间小于150ms 算点击
		if (!isMove && (Date.now () - startTime)< 150){
			callback && callback (); //执行回调函数
		}
		isMove = false;1/取反重置startTime = 0;
	});
}
//调用
tap (aiv, function ({
	//执行代码
});

3.使用插件。。

fastclick插件解决300ms延迟。