事件监测,顺便说一下超级牛逼的CSS平滑效果【转】
以前我们会用mouseover|mouseout事件来暗挫挫的实现hover效果,而现在用CSS伪选择器的:hover
和:focus
什么的就直接搞定了。想到这里,内心止不住的伤感啊……魔法师们坚持住!咳咳,当然,CSS也并不是万能的,有些事情还是要跟事件配合完成,比如下面这个例子,对鼠标指针进行定位。这是相当简单的了是不,我们先搞个绝对定位的小球元素,下面是它的HTML:
<div class="plot"></div>
这是它的CSS:
.plot { position:absolute; background:rgb(175,50,50); width: 20px; height: 20px; border-radius: 20px; display: block; top:0; left:0; }
我们监听并处理doucment的click事件,利用<a target="_blank" href="https://www.ancii.com/link/v1/7DZIIP7vza1Pnnr0kWwZDv5er6XiYcNn0bCTiOkQG8oGff3T6dSAiXiWG7biKYldlaBRAFbxx5cB3OO1RFCXBg/" rel="nofollow" title="PageX">PageX</a>
和pageY
对小球进行定位。注意啊这里,我们需要减去球的半径,以让球的中心在鼠标指针上:
var plot = document.querySelector('.plot'), offset = plot.offsetWidth / 2; document.addEventListener('click', function(ev) { plot.style.left = (ev.pageX - offset) + 'px'; plot.style.top = (ev.pageY - offset) + 'px'; }, false);
随便点击屏幕的任意位置,小球都会随之闪现到那。不过它并不是平滑过去的,但如果你勾选这个示例的复选框,你会发现小球就会很圆润的滑过来了。这个效果呢,过去的话可能只能用JS库来完成,但现在啊,时代不同了……我们只需要用CSS写个过渡效果的类,而剩下的事情就让浏览器去处理。为至于此,我们写个类名为smooth
的样式,在复选框被选中之后,将其应用到小球上:
.smooth { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
添加JavaScript:
var cb = document.querySelector('input[type=checkbox]'); cb.addEventListener('click', function(ev) { plot.classList.toggle('smooth'); }, false);
随着新世界的来临,CSS和JavaScript双剑合璧,谁与争锋!嘛顺便说下,在JS中也有跟CSS过渡和动画效果有关的事件噢。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT