Heim > Web-Frontend > js-Tutorial > Hauptteil

Ein- und Ausfahren der jQuery/Vue-Maus

不言
Freigeben: 2018-07-09 15:04:14
Original
3100 Leute haben es durchsucht

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

jQuery-Version

Das jQuery-Plug-in kann über die Methode $.fn.extend erweitert werden.

html

<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>
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

js

<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)
                }
            }
        }

        $(&#39;.content&#39;).mouseMove(&#39;.shade&#39;)
    })(window.jQuery);
</script>
Nach dem Login kopieren

Vue-Version

Die 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>
Nach dem Login kopieren

css

<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>
Nach dem Login kopieren

js

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
        (function () {
                const mouseHover = {
                        name: &#39;mouseHover&#39;,
                        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, &#39;in&#39;);
                                },
                                handleOut: function (e) {
                                        const direction = this.direction(e);
                                        this.animate(direction, &#39;out&#39;);
                                },
                                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 == &#39;in&#39;) {
                                                this.$refs.shade.style.transition = &#39;none&#39;;
                                                if (direction == &#39;top&#39;) {
                                                        top = &#39;-100%&#39;;
                                                        left = 0;
                                                } else if (direction == &#39;right&#39;) {
                                                        top = 0;
                                                        left = &#39;100%&#39;;
                                                } else if (direction == &#39;bottom&#39;) {
                                                        top = &#39;100%&#39;;
                                                        left = 0;
                                                } else if (direction == &#39;left&#39;) {
                                                        top = 0;
                                                        left = &#39;-100%&#39;;
                                                }
                                                this.$refs.shade.style.top = top;
                                                this.$refs.shade.style.left = left;
                                                setTimeout(() => {
                                                        this.$refs.shade.style.transition = &#39;all .2s ease 0s&#39;;
                                                        this.$refs.shade.style.top = 0;
                                                        this.$refs.shade.style.left = 0;
                                                }, 0)

                                        } else if (type == &#39;out&#39;) {
                                                if (direction == &#39;top&#39;) {
                                                        top = &#39;-100%&#39;;
                                                        left = 0;
                                                } else if (direction == &#39;right&#39;) {
                                                        top = 0;
                                                        left = &#39;100%&#39;;
                                                } else if (direction == &#39;bottom&#39;) {
                                                        top = &#39;100%&#39;;
                                                        left = 0;
                                                } else if (direction == &#39;left&#39;) {
                                                        top = 0;
                                                        left = &#39;-100%&#39;;
                                                }
                                                this.$refs.shade.style.top = top;
                                                this.$refs.shade.style.left = left;
                                        }
                                }
                        }
                }
                Vue.component(mouseHover.name, mouseHover)
                new Vue({
                        el: &#39;#app&#39;
                })
        })();
</script>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage