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.mzph.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…