vue 移入显示_鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见，比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。

实现思路

1、根据鼠标的位置定位在元素内出现的方向

2、根据方向动态设置遮罩层样式

3、设置动画移动遮罩层

jQuery版

jQuery插件可以通过$.fn.extend方法进行拓展。

html

mouse hover

mouse hover

mouse hover

mouse hover

mouse hover

mouse hover

css

.container {

width: 600px;

margin: auto;

margin-top: 100px;

}

.content {

float: left;

position: relative;

height: 150px;

width: 150px;

margin: 20px;

overflow: hidden;

background: #ccc;

}

.content .shade {

position: absolute;

top: 0;

display: none;

width: 100%;

height: 100%;

line-height: 100px;

color: #fff;

background: rgba(0, 0, 0, 0.7);

}

js

(function ($) {

$.fn.extend({

"mouseMove": function (child) {

$(this).hover(function (e) {

$this = $(this);

var ele = $this.find(child);

var clientX = e.clientX;

var clientY = e.clientY;

var top = parseInt($this.offset().top);

var bottom = parseInt(top + $this.height());

var left = parseInt($this.offset().left);

var right = parseInt(left + $this.width());

var absTop = Math.abs(clientY - top);

var absBottom = Math.abs(clientY - bottom);

var absLeft = Math.abs(clientX - left);

var absRight = Math.abs(clientX - right);

var min = Math.min(absTop, absBottom, absLeft, absRight);

var eventType = e.type;

switch (min) {

case absTop:

animate("top", eventType, ele);

break;

case absBottom:

animate("bottom", eventType, ele);

break;

case absLeft:

animate("left", eventType, ele);

break;

case absRight:

animate("right", eventType, ele)

}

})

}

});

function animate(direction, type, ele) {

var timer = 200;

var $target = $(ele);

if (type == "mouseenter") {

$target.stop(true, true);

}

if (direction == "top") {

if (type == "mouseenter") {

$target.css({

display: "block",

top: "-100%",

left: "0"

}).animate({

top: 0,

left: 0

}, timer)

} else {

$target.animate({

display: "block",

top: "-100%",

left: "0"

}, timer)

}

} else if (direction == "left") {

if (type == "mouseenter") {

$target.css({

display: "block",

top: "0",

left: "-100%"

}).animate({

left: 0,

top: 0

}, timer)

} else {

$target.animate({

display: "block",

left: "-100%"

}, timer)

}

} else if (direction == "bottom") {

if (type == "mouseenter") {

$target.css({

display: "block",

top: "100%",

left: "0"

}).animate({

top: 0,

left: 0

}, timer)

} else {

$target.animate({

display: "block",

top: "100%",

left: "0"

}, timer)

}

} else if (direction == "right") {

if (type == "mouseenter") {

$target.css({

display: "block",

top: 0,

left: "100%"

}).animate({

left: "0%",

top: 0

}, timer)

} else {

$target.animate({

display: "block",

left: "100%"

}, timer)

}

}

}

$('.content').mouseMove('.shade')

})(window.jQuery);

Vue版

通用Vue的组件实现判断元素内鼠标的位置，利用插槽的方式显示遮罩层内容。

html

mouse hover

mouse hover

mouse hover

mouse hover

mouse hover

mouse hover

css

html,

body {

text-align: center;

color: #000;

background-color: #353535;

}

* {

box-sizing: border-box;

}

#app {

width: 600px;

margin: auto;

margin-top: 100px;

}

.content {

float: left;

position: relative;

height: 150px;

width: 150px;

margin: 20px;

overflow: hidden;

background: #ccc;

}

.content .shade {

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

line-height: 100px;

color: #fff;

background: rgba(0, 0, 0, 0.7);

}

js

(function () {

const mouseHover = {

name: 'mouseHover',

template: `

`,

data: () => {

return {}

},

methods: {

handleIn: function (e) {

const direction = this.direction(e);

this.animate(direction, 'in');

},

handleOut: function (e) {

const direction = this.direction(e);

this.animate(direction, 'out');

},

direction: function (e, type) {

const clientX = e.clientX;

const clientY = e.clientY;

const top = e.target.offsetTop;

const bottom = parseInt(top + e.target.offsetHeight);

const left = e.target.offsetLeft;

const right = parseInt(left + e.target.offsetWidth);

const absTop = Math.abs(clientY - top);

const absBottom = Math.abs(clientY - bottom);

const absLeft = Math.abs(clientX - left);

const absRight = Math.abs(clientX - right);

const min = Math.min(absTop, absBottom, absLeft, absRight);

let direction;

switch (min) {

case absTop:

direction = "top";

break;

case absBottom:

direction = "bottom";

break;

case absLeft:

direction = "left";

break;

case absRight:

direction = "right";

break;

};

return direction;

},

animate: function (direction, type) {

let top = 0,

left = 0;

if (type == 'in') {

this.$refs.shade.style.transition = 'none';

if (direction == 'top') {

top = '-100%';

left = 0;

} else if (direction == 'right') {

top = 0;

left = '100%';

} else if (direction == 'bottom') {

top = '100%';

left = 0;

} else if (direction == 'left') {

top = 0;

left = '-100%';

}

this.$refs.shade.style.top = top;

this.$refs.shade.style.left = left;

setTimeout(() => {

this.$refs.shade.style.transition = 'all .2s ease 0s';

this.$refs.shade.style.top = 0;

this.$refs.shade.style.left = 0;

}, 0)

} else if (type == 'out') {

if (direction == 'top') {

top = '-100%';

left = 0;

} else if (direction == 'right') {

top = 0;

left = '100%';

} else if (direction == 'bottom') {

top = '100%';

left = 0;

} else if (direction == 'left') {

top = 0;

left = '-100%';

}

this.$refs.shade.style.top = top;

this.$refs.shade.style.left = left;

}

}

}

}

Vue.component(mouseHover.name, mouseHover)

new Vue({

el: '#app'

})

})();

效果