手电筒效果_html-js-css

概述<!DOCTYPE html> <html> <head>   <meta charset=utf-8>   <meta name="viewport" content="width=device-width,initial-scale=1.0">   <title>发送短信</title>   <style>     * {       margin: 0;       padding: 0; <!DOCTYPE HTML> <HTML>
<head>   <Meta charset=utf-8>   <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">   <Title>发送短信</Title>   <style>     * {       margin: 0;       padding: 0;     }     .aa{       wIDth:300px;       height:300px;       position: relative;       overflow: hIDden;     }     #e{       wIDth:300px;       height:300px;     }     .mask{       wIDth:800px;       height:800px;       position: absolute;       left:-250px;       top:-250px;       background: url("./tou.png") no-repeat center;       background-size: contain;     }     </style>   </head>   <body>       <div ID="main">         <img src="14.jpg" ID="e" >         <div ID="mask"></div>       </div> </body> <script> var mask=document.querySelector("#mask"); var main=document.querySelector("#main"); main.onmousemove=function(e){   console.log(e)
  var offsetX=e.clIEntX;   var offsetY=e.clIEntY;   var x=offsetX-400   var y=offsetY-400
console.log(x,y) mask.style.left=x+"px" mask.style.top=y+"px" }

</script> </HTML> 总结

以上是内存溢出为你收集整理的手电筒效果全部内容，希望文章能够帮你解决手电筒效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1051565.html