事件监测,顺便说一下超级牛逼的CSS平滑效果【转】

陈浩 2014-01-24

以前我们会用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 href="https://developer.mozilla.org/en/DOM/event.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过渡和动画效果有关的事件噢。

相关推荐

aSuncat / 0评论 2020-08-18