Maison > Article > interface Web > Effet d'entrée et de sortie de la souris jQuery/Vue
Cet article présente principalement l'effet de mouvement d'entrée et de sortie de la souris jQuery/Vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
2. Définissez dynamiquement le style du calque de masque en fonction de la direction
3. Définissez l'animation pour déplacer le calque de masque
<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); }js
3f1c4e4b6b16bbbd69b2ee476dc4f83a (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); 2cacc6d41bbb37262a98f745aa00fbf0Version VueJugement général de mise en œuvre du composant Vue Le La position de la souris dans l'élément utilise des emplacements pour afficher le contenu du calque de masque. 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>css
c9ccee2e6ea535a969eb3f532ad9fe89 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); } 531ac245ce3e4fe3d50054a55f265927js
55e3448fe1e3f50457fe9b1ca363a1fe2cacc6d41bbb37262a98f745aa00fbf0 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' }) })(); 2cacc6d41bbb37262a98f745aa00fbf0Ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas être utile à l'apprentissage de chacun Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe ! Recommandations associées :
Méthode de conversion d'une chaîne JS en nombre
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!