jQuery/Vue 마우스 이동 효과

不言
풀어 주다: 2018-07-09 15:04:14
원래의
3097명이 탐색했습니다.

이 글은 주로 jQuery/Vue 마우스 이동 효과를 소개합니다. 이제 특정 참조 가치가 있습니다. 필요한 친구가 참조할 수 있습니다.

구현 아이디어

1. 마우스 위치
2. 방향에 따라 마스크 레이어 스타일을 동적으로 설정
3. 마스크 레이어를 이동하도록 애니메이션 설정

jQuery 버전

jQuery 플러그인은 $. fn.extend 메소드.

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>
로그인 후 복사

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

<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>
로그인 후 복사

Vue 버전

General Vue 구성 요소는 요소 내의 마우스 위치를 결정하고 슬롯을 사용하여 마스크 레이어 콘텐츠를 표시합니다.

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

<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>
로그인 후 복사

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>
로그인 후 복사

이상이 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 사이트를 주목해주세요!

관련 권장 사항:

JS 문자열을 숫자로 변환하는 방법

위 내용은 jQuery/Vue 마우스 이동 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!