Un simple petit effet d'animation-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Un simple petit effet d'animation

Jun 19, 2017 pm 05:34 PM

动画区域效果

Effet de démonstration :

Le projet doit faire cet effet, notez le effet À propos, je l'ai emballé dans un plug-in et j'ai également pratiqué comment écrire le plug-in.

Code :

html : Il n'y a rien à dire là-dessus, c'est une mise en page simple : il y a une introduction sur l'image pour présenter le positionnement en dehors de la zone.

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;title&gt;&lt;/title&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/reset.css?1.1.10&quot; /&gt;&lt;script src=&quot;js/jquery-2.1.0.js?1.1.10&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;&lt;script src=&quot;js/TweenMax.js?1.1.10&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;&lt;style type=&quot;text/css&quot;&gt;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;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt; &lt;img src=&quot;img/animation1.jpg&quot; /&gt;&lt;div class=&quot;info&quot;&gt;点我吧&lt;/div&gt;&lt;/li&gt;&lt;li&gt; &lt;img src=&quot;img/animation2.jpg&quot; /&gt;&lt;div class=&quot;info&quot;&gt;点我吧&lt;/div&gt;&lt;/li&gt;&lt;li&gt; &lt;img src=&quot;img/animation3.jpg&quot; /&gt;&lt;div class=&quot;info&quot;&gt;点我吧&lt;/div&gt;&lt;/li&gt;&lt;li&gt; &lt;img src=&quot;img/animation4.jpg&quot; /&gt;&lt;div class=&quot;info&quot;&gt;点我吧&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;script src=&quot;js/lonelyAni.js?1.1.10&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;$(function() {
                $(&quot;ul li&quot;).lonelyMove({
                    moveClass: &quot;.info&quot;});
            });&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

Copier après la connexion

Effet de plug-in JS : Encapsulez l'effet dans un plug-in et appelez-le directement plus tard.

//移入移出插件(function($) {
    $.fn.extend({&quot;lonelyMove&quot;: 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 &gt; liHeight ? (liHeight / liWidth) : 1),
                        F0 = (event.pageY - ($(this).offset().top) - (liHeight / 2)) * (liHeight &gt; liWidth ? (liWidth / liHeight) : 1),
                        index = Math.round((((Math.atan2(F0, u0) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
                        location = [{&#39;top&#39;: &quot;-100%&quot;,&#39;left&#39;: &#39;0%&#39;}, {&#39;top&#39;: &#39;0%&#39;,&#39;left&#39;: &quot;100%&quot;}, {&#39;top&#39;: &quot;100%&quot;,&#39;left&#39;: &#39;0%&#39;}, {&#39;top&#39;: &#39;0%&#39;,&#39;left&#39;: &quot;-100%&quot;}],
                        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);

Copier après la connexion

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn