JS特效教程:给网站添加鼠标点击弹出指定汉字特效

news/2024/5/12 22:00:25/文章来源:https://blog.csdn.net/amu628/article/details/81118880

网站添加鼠标点击弹出指定汉字特效,就是鼠标点击站点任何位置,都会随机弹出我们指定的一组汉字中的一个。比如指定“文明,自由,民主,公正,和谐”等,点击鼠标时就会随机显示这一组的某个词语,见下图:

JS特效教程:给网站添加鼠标点击弹出指定汉字特效 建站经验 第1张

给网站添加鼠标点击弹出指定汉字特效的操作办法

这个特效不单单适用于 WordPress 博客网站,其他的网站包括但不限于 zblog、HTML 构建的网站都可以实现,只需要将以下 JS 代码添加到页脚的 </body> 标签的前面即可。

  1. <script type="text/javascript">
  2. /* 鼠标特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $("body").click(function(e) {
  6.         var a = new Array("天真","富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
  7.         var $i = $("<span/>").text(a[a_idx]);
  8.         a_idx = (a_idx + 1) % a.length;
  9.         var x = e.pageX,
  10.         y = e.pageY;
  11.         $i.css({
  12.             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
  13.             "top": y - 20,
  14.             "left": x,
  15.             "position": "absolute",
  16.             "font-weight": "bold",
  17.             "color": "#ff6651"
  18.         });
  19.         $("body").append($i);
  20.         $i.animate({
  21.             "top": y - 180,
  22.             "opacity": 0
  23.         },
  24.         1500,
  25.         function() {
  26.             $i.remove();
  27.         });
  28.     });
  29. });
  30. </script>

其中 Array("天真","富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善")里面的汉字可以随便修改组合,也可以适当增加或删除,一切随意就好。还有,如果觉得点击弹出的汉字往上跑得太快的话,你可以将以上代码中的 1500 改为 3000 或者更大的数值即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_893187.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中小型网站运营者的基础运营思路

对于中小型网站、尤其是企业展示型官网的运营者&#xff0c;往往技术能力有限&#xff0c;由公司的“网管”负责运营&#xff0c;这就意味着这个网管很可能对网站运营毫无概念&#xff0c;或是一知半解&#xff0c;本篇文章就是基于这个现状&#xff0c;讲述一下这种情况下的基…

揭秘全球最大网站Facebook背后的那些软件

2010年6月&#xff0c;Google公布全球Top 1000 网站。Facebook独占鳌头。 以Facebook现在的经营规模&#xff0c;诸多传统服务器的技术均将崩溃或根本无法支撑。那么面对5亿的活跃用户&#xff0c;Facebook的工程师们又将如何让网站平稳运转呢&#xff1f;伯乐在线 - 职场博客的…

2019仿笔趣阁小说网站源码(PC版+手机版+APP+采集器+教程)下载

第三套杰奇WAP小说模板&#xff0c;使用百度MIP&#xff0c;更重要的是这次使用了百度的MIP来制作模板。 1、底层程序仍然是独立版程序&#xff0c;模板样式和代码已经全部重写&#xff0c;不在有原来的代码。 2、同时本套程序已经更新过底层代码&#xff0c;本套模板中&#x…

苹果cmsv10漂亮大气响应式视频网站模板(自适应手机端)源码下载

苹果CMSV10模板&#xff0c;仿69TAN&#xff0c;黑色大气自适应视频网站模板 提供苹果CMS8X和V10模板、海洋CMS模板、菲菲2、X、3 x、5 x、红兔CMS、X模板 源代码下载链接: https://pan.baidu.com/s/1Gg4ATO1vzq5cZXt8u7YDAA 提取码: sjwg

阿里云主机搭建网站,并使外网可访问到

一、在阿里云主机搭建网站 1.连接上阿里云主机&#xff0c;在里面操作&#xff1a;&#xff08;在本地的电脑使用远程桌面连接即可&#xff0c;输入公网IP和用户密码进行连接&#xff09; 下载phpstudy&#xff08;一个类似WEB服务器的软件工具&#xff0c;搭建服务器环境&…

You-Get,多网站视频下载工具,非常方便

You-Get是一个非常优秀的网站视频下载工具。使用You-Get可以很轻松的下载到网络上的视频、图片及音乐。 按WinR键打开运行&#xff0c;输入cmd&#xff0c;再输入命令 pip install you-get&#xff0c;安装 you-get you-get 中文说明 : https://github.com/soimort/you-get/wik…

大作业rhce(网站.邮件.dns)

一.要求 二.做实验 2.1配置百度网站 1在虚拟机上建库&#xff0c;进入/etc/yum.repos.d/目录&#xff0c;编辑 baser.repo 配置文件 [baseos] namebaseos baseurl/mnt/BaseOS gpgcheck0 [appstream] nameappTream baseurl/mnt/AppStream gpgcheck0 2 在虚拟机上安装 httpd 包…

避免网站在IE6中出现‘无法打开站点,已终止操作’的JS问题

IE6在中国还占据着30%的用户&#xff0c;其中大多数网吧还是使用的IE6.0&#xff0c;所以很多网站必须一直兼容IE6下去。 如果浏览一个网站出现 无法打开站点&#xff0c;已终止操作 的故障&#xff0c;浏览器就会变成一片空白&#xff0c;而用户就会关闭网站&#xff0c;在非…

struts2+hibernate 实现B2C电子商务网站的登录 、注册中验证码的实现(源码)

下边只在注册中实现 1、首先是在Action中写出生成验证码所需的方法&#xff08;下边是在MemberAction.java中写&#xff09; [java] view plain copy print ? package www.csdn.dbshop.action; import org.apache.struts2.ServletActionContext; import www.csdn.dbshop…

实际采用 FleaPHP 的网站

下面都是采用 FleaPHP 框架开发的网站列表&#xff0c;如果发现无效连接请在留言。 如果你有采用 FleaPHP 开发的网站&#xff0c;并且愿意公开网址&#xff0c;可以发邮件到 dualface (at) gmail.com 需要提供的信息包括网站名称和连接地址&#xff0c;以及简单的介绍文字。…

阿里云linux服务器------第二章:配置静态网站

有了服务器后我们总想弄点啥&#xff0c;首先我们可以建立一个属于自己的静态网站。 第一步&#xff1a;打开putty连接上自己的服务器 输入一下命令&#xff1a;&#xff08;以下命令试过多次可以复制使用注意空格&#xff09; 安装Apache yum -y install httpd 添加linux用户…

阿里云linux服务器------第三章:配置php,mysql环境实现动态网站

在第二章中我们讲述了如何配置静态网站&#xff0c;接下来我们配置动态网站需要的环境 第一步&#xff1a;配置php环境&#xff0c;打开putty连接到自己的服务器执行以下命令 安装php yum install php php-devel 重启apache使php生效 y 安装php的扩展 yum install php-my…

【iOS资源推荐】那些我看过的书,视频,网站,博客(持续更新)

由于很多新手都有选择恐惧症&#xff0c;所以这里推荐的东西&#xff0c;我尽量少而精 1.视频 这个不用说&#xff0c;斯坦福大学的教程不管是权威性&#xff0c;还是新颖程度都是No1. 斯坦福大学公开课&#xff1a;iOS 7应用开发&#xff0c;这个是OC http://v.163.com/sp…

如何让你的网站排名靠前

网站做好了&#xff0c;怎样才能让你的网站在各大搜索引擎中排名靠前呢&#xff1f;网上的帖子很多&#xff0c;通过搜索和总结&#xff0c;整理出了一套自己行之有效的方法&#xff0c;写出来供大家参考 成功案例推荐&#xff1a; http://sooboo.com.cn/ 还在继续整理中&#…

从Altium官方网站下载最新的库文件

Altium Designer是电子工程师必备的原理图及pcb设计软件&#xff0c;这边教大家如何下载库文件以及安装库文件&#xff0c;Altium Designer公司提供了齐全的库文件&#xff0c;所以笔者强烈建议使用官方库文件。 提示&#xff1a;这个方法在适用各个版本的Altium Designer。 1.…

H5视频网站开发

总结一下视频网站开发的几个主要模块&#xff1a;视频断点续传、视频切片、H5播放。 断点续传&#xff1a; 参考博文&#xff1a;C#实现上传文件分割&#xff0c;断点续传上传文件 视频切片 调用ffmpeg.exe进行切片&#xff1a; public void SegmentVideo(string filePath)…

II7建站相关命令

1.IIS7建站相关命令 1.启动站点&#xff08;命令必须放在C:\Windows\System32\inetsrv路径下执行&#xff09; appcmd start site 站点名称 示例&#xff1a;&#xff08;可批量操作&#xff09; appcmd start site bbs.zhizhuzx.com 2.停止站点&#xff08;命令必须放在C:\Win…

明年年初,MIT(麻省理工学院)将对外开手机版网站代码

就是这个咚咚 如果感兴趣就先去看看下面的连接 MITs Vision for Mobility[PDF] Developing the MIT Mobile Web[PDF] 转自&#xff1a;http://www.readwriteweb.com/archives/mit_to_open_source_mobile_web.php Massachusetts Institute of Technology 麻省理工学院

网站SEO工具篇之外链查询工具

雅虎站长工具的关闭不得不说是站长们的一大遗憾事.曾经我就是靠这个分析一些不错的网站的外链,买了不少优质的外链.言归正传,反链/外链还是要查的.下面就列一列本人收集到的一些不错的外链工具.不过它们虽然不像雅虎外链一样&#xff0c;能很好将查询到的外链结果按照权重排名。…

[PoC]某B2B网站的一个反射型XSS漏洞

Author: Charlie 个人微博&#xff1a;http://YinYongYou.com 转载请注明出处。 工作过程纯粹手贱&#xff0c;测试了一下。然后发现了这么一个东西。有心利用能造成大范围影响。如可以自由修改用户信息。 漏洞存在文件&#xff1a;*.b2b.youboy.com/framephoto.html 【用户商…