Heim > Artikel > Web-Frontend > Ein- und Ausfahren der jQuery/Vue-Maus
Ein- und Ausfahren der jQuery/Vue-Maus
- 不言Original
- 2018-07-09 15:04:143048Durchsuche
In diesem Artikel wird hauptsächlich der Ein- und Ausstiegseffekt von jQuery/Vue vorgestellt. Jetzt kann ich ihn mit Ihnen teilen
Implementierungsideen
1. Positionieren Sie die Richtung des Elements entsprechend der Position der Maus
2. Stellen Sie den Maskenebenenstil dynamisch entsprechend der Richtung ein
<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>
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);
}
js3f1c4e4b6b16bbbd69b2ee476dc4f83a
(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);
2cacc6d41bbb37262a98f745aa00fbf0
Vue-VersionDie allgemeine Vue-Komponentenimplementierung bestimmt die Position der Maus innerhalb der Element. Verwenden Sie Slots, um den Inhalt der Maskenebene anzuzeigen. html<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>
cssc9ccee2e6ea535a969eb3f532ad9fe89
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);
}
531ac245ce3e4fe3d50054a55f265927
js55e3448fe1e3f50457fe9b1ca363a1fe2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
(function () {
const mouseHover = {
name: 'mouseHover',
template: `
66934792eac262c9939526b37df27585
f73fb36290ce3add4887a82e5203f6a3
58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee
94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
`,
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'
})
})();
2cacc6d41bbb37262a98f745aa00fbf0
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium hilfreich sein. Weitere verwandte Inhalte Bitte achten Sie auf die chinesische PHP-Website! Verwandte Empfehlungen:
Methode zum Konvertieren von JS-Strings in Zahlen
Das obige ist der detaillierte Inhalt vonEin- und Ausfahren der jQuery/Vue-Maus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der Unterschied zwischen den Methoden css() und attr() in jQueryNächster Artikel：Der Unterschied zwischen den Methoden css() und attr() in jQuery