javascript特效_如何在網頁添加鼠標點擊特效

經常有同學問我怎么做到的,本論壇屬于DZ當然用的是插件啦。

偶然在網上找到一個關于wordpress的特效代碼,分享給大家。

WordPress 添加鼠標點擊特效
實際上這種教程在網上搜索一下有一大堆,已經是各大博主玩爛的東西了。不過既然給自己的博客加上了這個,那就也湊數發一篇吧。

前兩天翻相冊翻到一張圖,突然想起了遠景論壇(前幾天上去找東西來著)點擊鼠標會有:“富強 民主 文明 和諧 ”的文字漂浮效果

cb08e8bd028cfe48fb7ce1b8a1a26c49.png

尋思著網站這么久沒更新了(主要是太懶了最近太忙了)于是想稍微折騰一下。其實很簡單,就是一段Javascript而已。

最簡單的方法就是直接在 WordPress 主題的 footer.php 文件中 <?php wp_footer(); ?> 的前面加上一段代碼就行了。
網上一搜索也基本都是用的這方法。

<script type="text/javascript">
/*富強民主文明和諧*/
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善", "手麻了", "歇會兒");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 9999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>

大家學會了嗎?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/443669.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/443669.shtml
英文地址,請注明出處:http://en.pswp.cn/news/443669.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Android |雙鎖單例模式中使用Context如何避免內存泄露的 Warning 提示

文章目錄問題解決方法拓展問題 在Android開發中&#xff0c;經常會將工具類以單例模式的方法實現&#xff0c;而工具類中又總不可避免的用到 Context &#xff0c;例如&#xff1a; public class MySingleton {private static volatile MySingleton instance;private final C…

android nio debug模式正常 release包crash_Flutter包大小治理上的探索與實踐

Flutter作為一種全新的響應式、跨平臺、高性能的移動開發框架&#xff0c;在性能、穩定性和多端體驗一致上都有著較好的表現&#xff0c;自開源以來&#xff0c;已經受到越來越多開發者的喜愛。但是&#xff0c;Flutter的引入往往帶來包體積的增大&#xff0c;給很多研發團隊帶…

Linux學習:第三章-Linux常用命令-1

提示符&#xff1a; [rootlocalhost ~]# [登錄用戶名主機名 當前所在目錄]提示符 ~家目錄 /root /home/aa 提示符&#xff1a; #超級用戶 $普通用戶 一 linux命令的格式1、命令 [選項] [參數]lslist顯示目錄下內容 ①命令名稱&#xff1a;ls 命令英文原意&#xff1a;list 命令…

Leetcode每日一題:使括號有效的最少添加(括號匹配)

文章目錄題目解析貪心趣解題目 只有滿足下面幾點之一&#xff0c;括號字符串才是有效的&#xff1a; 它是一個空字符串&#xff0c;或者它可以被寫成 AB &#xff08;A 與 B 連接&#xff09;, 其中 A 和 B 都是有效字符串&#xff0c;或者它可以被寫作 (A)&#xff0c;其中 …

yolov5搭建環境_Yolov5環境配置和訓練私有數據,YOLOv5,以及,私人

1.使用anaconda安裝python3.8的環境conda create -n yolo5 python3.8#anaconda下載地址: https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/2.安裝pytorch1.6 torchvision0.7conda install pytorch1.6 torchvision0.7 cudatoolkit10.13.安裝相關包pip install opencv-py…

sam格式的結構和意義_各種格式的練字本,對寫字真有幫助嗎

圖片來源于筆勢通各種格式的練字本現在越來越多&#xff0c;目的主要是便于學生把握好筆畫的位置和布局&#xff0c;從而把整個字的結構處理好&#xff0c;常見的有米字格&#xff0c;回宮格等。這些練字本對于初學者來說肯定是有幫助的&#xff0c;特別是低年級學生。當然隨著…

硬件結構圖_那曲地表水電子除垢儀結構圖

那曲地表水電子除垢儀結構圖水處理設備也應斷電停止使用&#xff0c;系統長期停止運行或季節性停止運行&#xff0c;在系統停止運行前&#xff0c;在水中投加適量緩蝕劑&#xff0c;并采取滿水濕保護的措施&#xff0c;以減小腐蝕&#xff0c;保護系統。開啟進水閥檢查無誤后電…

dtm文件生成等高線 lisp_南方cass如何用圖面高程點生成等高線

展開全部1、首先點擊cass菜單欄中的等高線菜單下的建立DTM&#xff0c;彈出對話框。可以有兩種方式建32313133353236313431303231363533e58685e5aeb931333431356665立DTM&#xff0c;由數據文件生成或者由圖面高程點生成&#xff0c;第一種直接在對話框中選擇相應的數據文件&am…

postgresql興建用戶_PostgreSQL 12.2, 11.7, 10.12, 9.6.17, 9.5.21, 和 9.

### **譯者&#xff1a;朱君鵬**### **發表于2020年2月13日 作者&#xff1a;PostgreSQL全球開發小組**#### 全球開發小組已發布的更新涵蓋所有支持的版本&#xff0c;包括12.2&#xff0c;11.7&#xff0c;10.12&#xff0c;9.6.17&#xff0c;9.5.21和9.4.26。該版本修正了一…

Linux學習:第三章-Linux常用命令-2

一文件操作命令 1&#xff09;創建空文件或修改文件時間 touch文件名 命令名稱&#xff1a;touch 命令所在路徑&#xff1a;/bin/touch 執行權限&#xff1a;所有用戶 2&#xff09;刪除 rm-rf文件名 -r刪除目錄 -f強制 命令名稱&#xff1a;rm 命令英文原意&#xff1a;remove…

雙屏怎么快速切換鼠標_在筆記本上實現雙屏設計,怎么做到的?

如果給你的筆記本電腦安裝兩個屏幕&#xff0c;你會用來干什么&#xff1f;是上班時間主屏幕放著PPT&#xff0c;副屏幕偷摸玩游戲&#xff1b;還是主屏幕玩游戲&#xff0c;副屏幕刷刷B站視頻&#xff1b;亦或是主屏幕P著圖&#xff0c;副屏幕在網上找找能用的素材&#xff1f…

劍指offer之隊列的最大值

題目描述&#xff1a; 請定義一個隊列并實現函數 max_value 得到隊列里的最大值&#xff0c;要求函數max_value、push_back 和 pop_front 的均攤時間復雜度都是O(1)。 若隊列為空&#xff0c;pop_front 和 max_value 需要返回 -1 示例 1&#xff1a; 輸入: [“MaxQueue”,“pu…

信元模式mpls 避免環路_【基礎】交換機堆疊模式

堆疊是指將一臺以上的交換機組合起來共同工作&#xff0c;以便在有限的空間內提供盡可能多的端口。多臺交換機經過堆疊形成一個堆疊單元。可堆疊的交換機性能指標中有一個"最大可堆疊數"的參數&#xff0c;它是指一個堆疊單元中所能堆疊的最大交換機數&#xff0c;代…

ckeditor5自定義 vue_vue中的富文本編輯器CKEditor5

image.pngimage.png1、安裝官網已經四種版本&#xff0c;也給出了下載安裝的方法&#xff0c;參考官網安裝https://ckeditor.com/ckeditor-5/download/2、引用在組件中引用import CKEditor from ckeditor/ckeditor5-build-classicimport ckeditor/ckeditor5-build-classic/buil…

劍指offer之禮物的最大值

題目描述&#xff1a; 在一個 m*n 的棋盤的每一格都放有一個禮物&#xff0c;每個禮物都有一定的價值&#xff08;價值大于 0&#xff09;。你可以從棋盤的左上角開始拿格子里的禮物&#xff0c;并每次向右或者向下移動一格、直到到達棋盤的右下角。給定一個棋盤及其上面的禮物…

為什么叫日上_古雷150萬噸乙烯,為啥叫芒果項目?

古雷150萬噸乙烯&#xff0c;為啥叫芒果項目&#xff1f;福建石油化工集團有限責任公司9月1日在福州舉行的一場新聞通氣會上透露&#xff0c;石化基地引進世界化工巨頭——沙特基礎工業公司(簡稱SABIC)&#xff0c;合資合作共建中沙古雷乙烯項目。中沙古雷乙烯項目將在福建古雷…

Linux學習:第四章-vi編輯器

一vi編輯器簡介vim全屏幕純文本編輯器別名alias命令‘命令別名’ aliasvi’vim’ alias lsls --colorttyls正常顯示顏色 alias lsls --colornever 環境變量配置文件/root/.bashrc 二vim使用 1vi模式 vi文件名 命令模式 輸入模式 末行模式 命令----》輸入a&#xff1a;追加i&…

劍指offer之矩陣中的路徑

題目描述&#xff1a; 請設計一個函數&#xff0c;用來判斷在一個矩陣中是否存在一條包含某字符串所有字符的路徑。路徑可以從矩陣中的任意一格開始&#xff0c;每一步可以在矩陣中向左、右、上、下移動一格。如果一條路徑經過了矩陣的某一格&#xff0c;那么該路徑不能再次進入…

gradient設置上下漸變_PaintCode Mac使用教程:如何使用漸變色

Mac平臺上一款強大的iOS矢量繪圖編程軟件PaintCode Mac&#xff0c;無論您是程序員還是設計師&#xff0c;paintcode3能夠讓你像在PS中畫圖一樣繪制各種UI圖形&#xff0c;而且paintcode3會自動幫你生成針對MacOS X或iOS平臺Objective-C或C#代碼&#xff0c;能夠節約大量的編程…

劍指offer之求1+2+...+n

題目描述&#xff1a; 求 12…n &#xff0c;要求不能使用乘除法、for、while、if、else、switch、case等關鍵字及條件判斷語句&#xff08;A?B:C&#xff09;。 示例 1&#xff1a; 輸入: n 3 輸出: 6 示例 2&#xff1a; 輸入: n 9 輸出: 45 來源&#xff1a;力扣&#xf…