Ein einfacher kleiner Animationseffekt-js-Tutorial-php.cn

Ein einfacher kleiner Animationseffekt

PHP中文网

Freigeben： 2017-06-19 17:34:46

Original

1791 Leute haben es durchsucht

Demonstrationseffekt:

Das Projekt muss diesen Effekt erzielen. Schreiben Sie ihn auf Effekt Übrigens habe ich es in ein Plug-In gepackt und das Schreiben des Plug-Ins geübt.

Code:

html: Dazu gibt es nichts zu sagen, es ist ein einfaches Layout: Es gibt eine Einführung dazu das Bild, um die Positionierung außerhalb des Bereichs vorzustellen.

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/reset.css?1.1.10" /><script src="js/jquery-2.1.0.js?1.1.10" type="text/javascript" charset="utf-8"></script><script src="js/TweenMax.js?1.1.10" type="text/javascript" charset="utf-8"></script><style type="text/css">ul {width: 800px;margin: 100px auto;}ul li {display: inline-block;width: 45%;cursor: pointer;position: relative;margin-top: 30px;overflow: hidden;}ul li img {width: 100%;height: 100%;}ul li .info {position: absolute;width: 100%;height: 100%;top: 100%;left: 100%;background-color: rgba(255, 255, 255, .6);color: #f00;text-align: center;line-height: 80px;}</style></head><body><ul class="clearfix"><li> <img src="img/animation1.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation2.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation3.jpg" /><div class="info">点我吧</div></li><li> <img src="img/animation4.jpg" /><div class="info">点我吧</div></li></ul><script src="js/lonelyAni.js?1.1.10" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {
                $("ul li").lonelyMove({
                    moveClass: ".info"});
            });</script></body></html>

Nach dem Login kopieren

JS-Plug-in-Effekt: Kapseln Sie den Effekt in ein Plug-in und rufen Sie ihn später direkt auf.

//移入移出插件(function($) {
    $.fn.extend({"lonelyMove": function(options) {var defaults = {
                time: .3,
                close: null}var opts = $.extend(true, defaults, options);var vision = /mobile/.test(navigator.userAgent.toLowerCase());return $(this).on(&#39;mouseenter mouseleave&#39;, function(event) {if(!vision) {var event = event || window.event,
                        liWidth = $(this).width(),
                        liHeight = $(this).height(),
                        u0 = (event.pageX - ($(this).offset().left) - (liWidth / 2)) * (liWidth > liHeight ? (liHeight / liWidth) : 1),
                        F0 = (event.pageY - ($(this).offset().top) - (liHeight / 2)) * (liHeight > liWidth ? (liWidth / liHeight) : 1),
                        index = Math.round((((Math.atan2(F0, u0) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
                        location = [{&#39;top&#39;: "-100%",&#39;left&#39;: &#39;0%&#39;}, {&#39;top&#39;: &#39;0%&#39;,&#39;left&#39;: "100%"}, {&#39;top&#39;: "100%",&#39;left&#39;: &#39;0%&#39;}, {&#39;top&#39;: &#39;0%&#39;,&#39;left&#39;: "-100%"}],
                        type = event.type;if(type == &#39;mouseenter&#39;) {
                        $(this).find(opts.moveClass).css(location[index]);
                        TweenMax.to($(this).find(opts.moveClass), opts.time, {
                            css: {
                                top: 0,
                                left: 0},
                            ease: Cubic.Linear
                        });
                    } else {
                        TweenMax.to($(this).find(opts.moveClass), opts.time, {
                            css: location[index],
                            ease: Cubic.Linear
                        });
                    }
                }
            });
        }
    });
})(jQuery);

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEin einfacher kleiner Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!