博客园美化（3）博客园鼠标点击特效代码

博客园鼠标点击特效代码

样式效果

鼠标点击出现烟花和"富强", "民主", "文明", "和谐"... 特效

使用方法

1.在自己的博客园中找到管理->设置页面
2.在页脚 HTML 代码中插入

<!--鼠标点击特效-->
<script type="text/javascript">//定义获取词语下标var a_idx = 0;jQuery(document).ready(function ($) {//点击body时触发事件$("body").click(function (e) {//需要显示的词语var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");//设置词语给span标签var $i = $("<span/>").text(a[a_idx]);//下标等于原来下标+1  余 词语总数a_idx = (a_idx + 1) % a.length;//获取鼠标指针的位置，分别相对于文档的左和右边缘。//获取x和y的指针坐标var x = e.pageX, y = e.pageY;//在鼠标的指针的位置给$i定义的span标签添加css样式$i.css({"z-index": 999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": rand_color()});// 随机颜色function rand_color() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}//在body添加这个标签$("body").append($i);//animate() 方法执行 CSS 属性集的自定义动画。//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。//详情请看http://www.w3school.com.cn/jquery/effect_animate.asp$i.animate({//将原来的位置向上移动180"top": y - 180,"opacity": 0//1500动画的速度}, 1500, function () {//时间到了自动删除$i.remove();});});});
</script>

参考链接博客页面鼠标点击特效

博客园美化（3）博客园鼠标点击特效代码相关推荐

博客园鼠标点击特效、自定义背景、看板娘等
一.鼠标点击烟花特效: 在页脚HTML处添加以下代码: <script src="https://files.cnblogs.com/files/wkfvawl/mouse-click ...
网站添加“富强·民主·爱国”鼠标点击特效美化
代码简介: 部署到自己的网站非常的简单,几乎是支持所有的站点,一般情况下只要将复制好的代码粘贴到之前就行了. 如果是WordPress网站直接添加到footer.php文件的之前就OK了. 代码中的字 ...
博客园美化（10）博客园 SimpleMemory 博客皮肤设置（简单简洁）
之前调整了两个样式的,好看是好看,用着不方便,把不需要的全都删掉了样式效果就是现在的使用方法一.开通博客园的JS权限管理>设置>勾选JS权限,等待审核通过. 二.选择模板 JS权限 ...
博客园添加鼠标粒子吸附特效
本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示二. 权限申请三. 设置步骤一. 效果展示在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请点击博 ...
Hexo+next主题美化静态博客
前言需要在Hexo下配置next主题 Hexo配置next主题教程:点我跳转更改配置以后使用素质三连:hexo clean && hexo g && hexo s即 ...
博客园美化教程大集合----极致个性化你的专属博客（超详细，看这篇就够了）...
阅读目录: 1. 前言 2. 定制自己的博客 00. 美化整体效果 01. 准备工作 02. 自定义个性化导航栏 03. 添加顶部博主信息 04. 添加顶部滚动公告 05. 为博客文章添加目录导航 0 ...
博客园美化主题（绝对有效）+ CSDN 搬入博客园
文章目录其他前言前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站: https://www.cbedai.net/lf 博主介绍: – 我是了凡 ...
博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)...
前言在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...
如何统计博客园的个人博客访问量
使用过新浪博客的人都知道,新浪博客的首页有访问量统计功能,迁移到博客园之后发现博客园却没有这项功能,所幸博客园在后台管理的设置选项中有一个公告栏和设置页首页脚代码功能,使用起来非常灵活和方便.借此我们 ...

博客园美化（3）博客园鼠标点击特效代码

样式效果

使用方法

博客园美化（3）博客园鼠标点击特效代码相关推荐

最新文章

热门文章