一個簡單的小動畫效果-js教程-PHP中文網

首頁

web前端

js教程

一個簡單的小動畫效果

PHP中文网

Jun 19, 2017 pm 05:34 PM

動畫區域效果

示範效果：

#專案需要做這個效果，把效果寫出來了順便就封裝成了一個插件，也練習了一下插件的寫法。

程式碼：

html:這個沒什麼說的，就是簡單的佈局：在圖片上有一個介紹，介紹定位在區域外部。

<!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>

登入後複製

JS插件效果:把效果封裝成了一個插件，以後直接呼叫就行了。

//移入移出插件(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);

登入後複製

以上是一個簡單的小動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7541

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

用戶遭遇罕見故障三星 Watch 智慧手錶突現白螢幕問題 Apr 03, 2024 am 08:13 AM

你可能遇到過智慧型手機螢幕出現綠色線條的問題，即使沒看過，也一定在網路上看過相關圖片。那麼，智慧手錶螢幕變白的情況你有遇見過嗎？ 4月2日，CNMO從外媒了解到，一名Reddit用戶在社群平台上分享了一張圖片，展示了三星Watch系列智慧手錶螢幕變白的情況。該用戶寫道："我離開時正在充電，回來時就這樣了，我嘗試重啟，但重啟過程中屏幕還是這樣。"三星Watch智能手錶屏幕變白這位Reddit用戶並未指明這款智能手錶的具體型號。不過，從圖片上看，應該是三星Watch5。此前，另一位Reddit用戶也報告

CSS動畫：如何實現元素的閃光效果 Nov 21, 2023 am 10:56 AM

CSS動畫：如何實現元素的閃光效果，需要具體程式碼範例在網頁設計中，動畫效果有時可以為頁面帶來很好的使用者體驗。而閃光效果是一種常見的動畫效果，它可以使元素更加引人注目。以下將介紹如何使用CSS實現元素的閃光效果。一、閃光的基本實作首先，我們需要使用CSS的animation屬性來實現閃光效果。 animation屬性的值需要指定動畫名稱、動畫執行時間、動畫延遲時

動畫不工作在PowerPoint中[修復] Feb 19, 2024 am 11:12 AM

您是否正在嘗試製作演示文稿，但無法添加動畫？如果動畫在你的WindowsPC上的PowerPoint中不起作用，那麼這篇文章將會幫助你。這是一個常見的問題，許多人都在抱怨。例如，在Microsoft團隊中演示或在螢幕錄製期間，動畫可能會停止運作。在本指南中，我們將探索各種故障排除技術，以協助您修復在Windows上的PowerPoint中無法運作的動畫。為什麼我的PowerPoint動畫不起作用？我們注意到Windows上PowerPoint中的動畫可能無法運作問題的一些可能原因如下：由於個

九州風神阿薩辛 4S 散熱器評測風冷「刺客大師」範兒 Mar 28, 2024 am 11:11 AM

說起阿薩辛ASSASSIN，相信玩家們一定會想到《刺客信條》中的各位刺客大師，不僅身手了得，而且"躬身於黑暗、服務於光明"的信條，與國內知名機箱/電源/散熱器品牌九州風神（DeepCool）旗下的阿薩辛ASSASSIN系列旗艦級風冷散熱器不謀而合。最近，該系列的最新產品阿薩辛ASSASSIN4S重磅上線，"西裝刺客，再進階"為高級玩家帶來全新的風冷散熱體驗。外觀一覽細節滿滿阿薩辛4S散熱器採用雙塔構造+單風扇內嵌設計，外麵包覆立方體造型的整流罩，整體感極強，並提供白、黑兩種配色可選，滿足不同色系

ppt動畫如何設定先進入再退出 Mar 20, 2024 am 09:30 AM

我們在日常的辦公中常常會使用到ppt，那麼你是否對ppt裡邊的每個操作功能都很了解呢？例如：ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少？每個投影片能不能自動播放、ppt動畫先進入再退出等等，那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟，就在下方，小伙伴們快來看一看吧！ 1.首先，我們在電腦中開啟ppt，點選文字方塊外側選取文字框，（如下圖紅色圈出部分所示）。 2.然後，點選選單列中的【動畫】，選取【擦除】的效果，（如圖紅色圈出部分所示）。 3.接下來，點擊【

春日裡的精緻光影藝術，哈趣 H2 性價比之選 Apr 17, 2024 pm 05:07 PM

隨著春天的到來，萬物復甦，一切都充滿了生命與活力。在這個美好的季節裡，如何為居家生活增添一抹別樣的色彩？哈趣H2投影儀，以其精緻的設計和超高的性價比，成為了這個春天裡不可或缺的一道亮麗風景。這款H2投影機小巧玲瓏卻不失時尚。無論是放在客廳的電視櫃上，或是臥室的床頭櫃旁，都能成為一道明亮的風景線。它的機身採用了奶白色的磨砂質地，這種設計不僅讓投影機的外觀更顯高級，同時也增加了觸感的舒適度。米色仿皮紋材質，更為整體外觀增添了一抹溫馨與雅緻。這種色彩與材質的搭配，既符合現代家居的美感趨勢，又能融入

跳票 2 年，國產 3D 動畫電影《二郎神之深海蛟龍》定檔 7 月 13 日 Jan 26, 2024 am 09:42 AM

本站1月26日消息，國產3D動畫電影《二郎神之深海蛟龍》發布一組最新劇照，正式宣布將於7月13日上映。據了解，《二郎神之深海蛟龍》是由迷狐星（北京）動漫有限公司、霍爾果斯眾合千澄影業有限公司、浙江橫店影業有限公司、浙江共贏影業有限公司、成都天火科技有限公司、華文映像（北京）影業有限公司出品，王君執導的動畫電影，原定2022年7月22日在中國大陸上映。本站劇情簡介：封神之戰後，姜子牙攜「封神榜」分封諸神，而後封神榜被天庭封印於九州祕境深海之下。事實上，除了分封神位，封神榜中還封緘著眾多強大的妖邪元

宮崎駿動畫電影《紅豬》延長上映至明年 1 月 16 日，豆瓣 8.6 分 Dec 18, 2023 am 08:07 AM

本站消息，宮崎駿動畫電影《紅豬》宣布將上映時間延長至2024年1月16日本站先前報道，《紅豬》已於11月17日登陸全國藝聯專線影院，累計票房超2000萬，豆瓣評分8.6分，4、5星好評佔85.8%。《紅豬》由吉卜力工作室製作，宮崎駿執導，森山週一郎、加藤登紀子、大塚明夫、岡村明美等參與配音，最初於1992年在日本上映。該片改編自宮崎駿漫畫作品《飛行艇時代》，講述了義大利空軍的王牌飛行員波魯克・羅森被施了魔法變成了一頭豬。之後，他成為了一位賞金獵人，打擊空中劫匪，保護身邊人。劇情簡介：羅森是一戰中

See all articles

一個簡單的小動畫效果

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題