前端-用js实现图层蒙版效果

最新推荐文章于 2023-09-03 22:27:40 发布

wenge1477

最新推荐文章于 2023-09-03 22:27:40 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/wenge1477/article/details/86516085

版权

1、设置viewport这个是视点，主要是在移动web上面应用

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>