共计 1856 个字符,预计需要花费 5 分钟才能阅读完成。
知识点 1:transform: translate(-50%, -50%)
在 position: fixed 的状态下将 transform 横竖调成 -50%,之后用它弄成鼠标的精准度。top 和 left 都为 0
知识点 2:pointer-events: none
解决层数关系,说白了抉择他的 div 都将成为“只能看不能用的货色”
因为获取以后的 div 都会时时跟着你!你本来点击的按钮点上来是有效的!因为被你以后圆形的盒子挡住了!只有你用了 pointer-events: none
那么这个圆形就成了陈设!不信你就点击下方的 干死我 这个按钮
知识点 3:addEventListener
多动能的一个,在 ec5 里都是 onclick,onmousemove!有他你就能间接写 click,mousemove 等
而且还有删除事件,比方当初的圆形圈太碍眼!那么就做一个按钮
function oooooo(){本来的圆形函数}
xxx.removeEventListener("click", oooooo)
知识点 4:a.style.cssText
a 和 b 一样
a.style.cssText = b.style.cssText = “left:” + e.clientX + “px;top:” + e.clientY + “px”
意思是 a 的 style 的 {} 里装 left:xxxx! 外面的 e 就是获取以后通过的相干参数!咱们抉择了 e.clientX 和 Y
<p class="box">
此处省略 6 万字
</p>
<div class="a"></div>
<div class="b"></div>
<button id="xx">
干死我
</button>
<style>
body {background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596380156120&di=c9f3e71c29a91d37ddf77038a1812357&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F56f62bab021a8.jpg') no-repeat;
background-size: cover;}
#xx {
margin: auto;
display: block;
padding: 10px 64px;
background: none;
border: 1px solid #fff;
color: #fff;
}
.box {
line-height: 1.7;
color: #fff;
margin-top: 280px;
padding: 10px 250px;
text-align: center;
}
.a {
width: 50px;
height: 50px;
background: none;
border-radius: 100px;
border: 1px solid #fff;
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
transition: 0.1s all;
pointer-events: none;
}
.b {
width: 8px;
height: 8px;
background: none;
border-radius: 100px;
border: 1px solid #fff;
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
transition: 0.15s all;
pointer-events: none;
}
p:hover~.a {background: rgba(255, 255, 255, 0.22);
border: none;
}
p:hover~.b {opacity: 0;}
</style>
<script>
var a = document.querySelector('.a');
var b = document.querySelector('.b');
document.addEventListener('mousemove', function(e){a.style.cssText = b.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`
})
document.getElementById("xx").addEventListener('click', function(){alert("此时胜利")
})
</script>
正文完