1、设置viewport这个是视点,主要是在移动web上面应用
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2、使用到了:
background-image: url("case2/2.jpg");设置背景图片
background-repeat: no-repeat; 设置背景填充的模式
background-size: cover;设置背景大小
background-position: center;设置背景的position
-webkit-mask-image:url("case2/1.png");设置图层蒙版的image
-webkit-mask-size:1px 1px; 设置图层蒙版的大小
-webkit-mask-repeat:no-repeat; 设置图层蒙版的填充模式
-webkit-mask-position:;设置图层蒙版的position
3、用到了手指触屏的事件:
事件触碰开始:ontouchstart触屏开始
事件触碰move:ontouchmove触屏move
事件触碰end:ontouchend
其中用到:
var touch=e.touches[0]; //获取到触碰的对象
var x=touch.clientX ; //获取x
var y=touch.clientY ; //获取y
例:
<!DOCTYPE html>
<html>
<head>
<title>this is day3 practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body,div{
height: 100%;
}
div{
background-image: url("case2/2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.m{
-webkit-mask-image:url("case2/1.png");
-webkit-mask-size:1px 1px;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:;
}
.show{
-webkit-mask-size:200px 200px;
}
</style>
</head>
<body>
<div class="m"></div>
<script type="text/javascript">
var div=document.querySelector("div");
div.ontouchstart=function(e){
var touch=e.touches[0];
var x=touch.clientX + div.offsetLeft - 100;
var y=touch.clientY + div.offsetTop - 100;
div.style.webkitMaskPosition = x + "px "+y+"px";
div.className="m show";
div.ontouchmove=function(e2){
var touch2=e2.touches[0];
var x2=touch2.clientX + div.offsetLeft - 100;
var y2=touch2.clientY + div.offsetTop - 100;
div.style.webkitMaskPosition = x2 + "px "+ y2+"px";
div.className="m show";
}
div.ontouchend=function(){
div.className="m";
div.ontouchmove=null;
}
}
</script>
</body>
</html>