JavaScript进阶--拉勾网鼠标移入移出效果

JavaScript进阶 1024丝毫不减少我敲写代码的激情,因为我闻到了代码的味道。 先上效果图(gif自己录制的,有点难看抱歉,工具licecap

JavaScript进阶

1024丝毫不减少我敲写代码的激情,因为我闻到了代码的味道。

先上效果图(gif自己录制的,有点难看抱歉,工具licecap)

JavaScript进阶--拉勾网鼠标移入移出效果

其实也是个偶然的机会,让我想去研究一下这个效果。主要是由于有个群里的人发了个讲解这个效果的链接,当时也没怎么在意,然后过两天,突然就想起这件事,便去拉勾网一看,哎呦效果不错,就想去找找那个链接看一下。没想到找了半天没找到了,没办法只能自己研究了。(自己独立思考的意识还是不够啊,惭愧!)

思路

------------

HTML结构

------------

<ul>

<li>

<div class="bg">

<p>JS</p>

</div>

</li>

.....

</ul>

li作为鼠标移入(mouseenter)和鼠标移出(mouseleave)的载体。

div作为动画执行的载体。

------------

CSS

------------

div采用absolute定位,通过top、left改变它的位置。

由于div的top、left可能会超出li的大小,所以要设置li的overflow:hidden;

-----------

JS

-----------

1、采用JS操纵CSS3 transition动画

2、如何判断鼠标移入移除的方向

鼠标坐标的相关知识

------------------

MouseEvent对象

------------------

下面介绍几个MouseEvent中坐标的相关知识:

(clientX, clientY): 以可视区域为参考系的坐标。

(pageX, pageY): 以整个页面(包括滚动条卷出的区域)为参考系的坐标。

(screenX, screenY): 以你的电脑屏幕为参考系的坐标。

获取某个元素内部的坐标

function pointTo(element, e) {

var elementBox = element.getBoundingClientRect();

return {

x: e.clientX - elementBox.left,

y: e.clientY - elementBox.top

};

}

计算元素左上角的坐标

function startPoint(element){

var x = 0,y = 0;

while(element != null) {

x += element.offsetLeft;

y += element.offsetTop;

element = element.offsetParent;

}

return {

x: x,

y: y

}

}

获取元素的宽度和高度(不要认为是width和height 新手特别容易犯错)

offsetHeight与offsetWidth

简单的封装一下CSS3 transition动画

/*

options参数:

obj: 运动的对象

speed: 运动的持续时间(可选)

changeStyle: 改变的属性,这里可能多个,所以采用函数的方式(可选)

callback: 回调函数(可选)

*/

function animation(options){

if(!options.obj) {

return false;

}

//设置默认持续时间

options.speed = options.speed || '.5s';

options.obj.style.transition = "all " + options.speed + " ease-in-out";

options.changeStyle.call(options.obj);

var flag = false;

options.obj.addEventListener('transitionend',function(){

//这里主要由于transitionend在每个属性的动画执行完多会走一遍,所以我们要让它只执行一次。

if(!flag) {

options.callback && options.callback();

}

},false);

}

如何确定方向

这里要用到数学中的正切相关的概念,我自己画了一张图,不知道你们能不能看特明白:(奇丑。。。)

JavaScript进阶--拉勾网鼠标移入移出效果

--------------------

得到元素的运动方向

--------------------

function getDirection(element,startPoint,pagePoint){

var halfWidth = element.offsetWidth / 2,halfHeight = element.offsetHeight / 2;

//得到中心点

var center = {

x: startPoint.x + halfWidth,

y: startPoint.y + halfHeight

}

//得到鼠标偏离中心点的距离

var disX = pagePoint.x - center.x;

var disY = pagePoint.y - center.y;

if(disY < 0 && Math.abs(disY / disX) >= 1) {

//上方

return 1;

}

else if(disY > 0 && Math.abs(disY / disX) >= 1) {

//下

return 2;

}

else if(disX < 0 && Math.abs(disY / disX) < 1) {

//左

return 3;

}

else {

//右

return 4;

}

}

启动事件的代码,有注释

/*

options中的参数:

触发事件的载体: targetElement

执行动画的载体: animationElement

*/

function HoverAction(options) {

if(!options.targetElement || !options.animationElement) {

return false;

}

this.targetElement = options.targetElement;

this.animationElement = options.animationElement;

this.timeId = null;

this.speed = "0.3s";

}

HoverAction.prototype.addEvent = function() {

//保存this的指向

var _this = this;

_this.targetElement.addEventListener('mouseenter',function(e){

//得到鼠标的坐标

var point = {

x: e.pageX,

y: e.pageY

}

console.log(point);

//获得方向

var dir = getDirection(_this.targetElement,startPoint(_this.targetElement),point);

clearTimeout(_this.timeId);

//取消过渡动画(防止重置动画载体位置时触发过渡效果)

_this.animationElement.style.transition = "";

//得到运动的方向,要确定动画载体的开始位置

switch(dir){

case 1:

_this.animationElement.style.top = "-100%";

_this.animationElement.style.left = "0";

break;

case 2:

_this.animationElement.style.top = "100%";

_this.animationElement.style.left = "0";

break;

case 3:

_this.animationElement.style.top = "0";

_this.animationElement.style.left = "-100%";

break;

case 4:

_this.animationElement.style.top = "0";

_this.animationElement.style.left = "100%";

break;

}

//异步执行

_this.timeId = setTimeout(function(){

animation({

obj: _this.animationElement,

speed: _this.speed,

changeStyle: function(){

this.style.top = "0";

this.style.left = "0";

}

});

},20);

},false);

_this.targetElement.addEventListener('mouseleave',function(e){

var left,top;

var point = {

x: e.pageX,

y: e.pageY

}

clearTimeout(_this.timeId);

_this.animationElement.style.transition = "";

var dir = getDirection(_this.targetElement,startPoint(_this.targetElement),point);

switch(dir) {

case 1:

top = '-100%';

left = '0';

break;

case 2:

top = '100%';

left = "0";

break;

case 3:

left = "-100%";

top = "0";

break;

case 4:

left = "100%";

top = "0";

break;

}

_this.timeId = setTimeout(function(){

animation({

obj: _this.animationElement,

speed: _this.speed,

changeStyle: function(){

this.style.top = top;

this.style.left = left;

}

});

},20);

},false);

}

源码

未登录用户
全部评论0
到底啦