This article mainly introduces the jQuery/Vue mouse movement in and out effect, which has certain reference value. Now I share it with you. Friends in need can refer to it
1. Position the direction of the element according to the position of the mouse
2. Dynamically set the mask layer style according to the direction
3. Set animation to move the mask layer
jQuery plug-in can be extended through the $.fn.extend method.
<div class="container">
<div class="content" style="background:aqua">
<div class="shade">
<p>mouse hover</p>
</div>
</div>
<div class="content" style="background:bisque">
<div class="shade">
<p>mouse hover</p>
</div>
</div>
<div class="content" style="background:cadetblue">
<div class="shade">
<p>mouse hover</p>
</div>
</div>
<div class="content" style="background:chocolate">
<div class="shade">
<p>mouse hover</p>
</div>
</div>
<div class="content" style="background:cornflowerblue">
<div class="shade">
<p>mouse hover</p>
</div>
</div>
<div class="content" style="background:darkkhaki">
<div class="shade">
<p>mouse hover</p>
</div>
</div>
</div>.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);
}<script>
(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);
</script>General Vue component implementation determines the position of the mouse within an element. Use slots to display the contents of the mask layer.
<div id="app">
<mouse-hover style="background:aqua">
<div slot>mouse hover</div>
</mouse-hover>
<mouse-hover style="background:bisque">
<div slot>mouse hover</div>
</mouse-hover>
<mouse-hover style="background:cadetblue">
<div slot>mouse hover</div>
</mouse-hover>
<mouse-hover style="background:chocolate">
<div slot>mouse hover</div>
</mouse-hover>
<mouse-hover style="background:cornflowerblue">
<div slot>mouse hover</div>
</mouse-hover>
<mouse-hover style="background:darkkhaki">
<div slot>mouse hover</div>
</mouse-hover>
</div><style>
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);
}
</style><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
(function () {
const mouseHover = {
name: 'mouseHover',
template: `
<p class="content" @mouseenter="handleIn" @mouseleave="handleOut">
<p class="shade" ref="shade">
<slot></slot>
</p>
</p>
`,
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'
})
})();
</script>The above is the entire content of this article. I hope it will be helpful to everyone’s study. More related content Please pay attention to PHP Chinese website!
Related recommendations:
Method of converting JS string to number
The above is the detailed content of jQuery/Vue mouse move in and out effect. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
