博客园添加鼠标点击特效

原文:http://www.cnblogs.com/xiaokang01/p/9911501.html

废话少说先看效果:

复制下面代码,点击博客园

管理-->设置

然后

在保存就好了

代码如下

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

原文地址:https://www.cnblogs.com/shihaiming/p/10136493.html

时间: 2024-10-10 04:48:52

博客园添加鼠标点击特效的相关文章

博客园添加鼠标点击特效:字符表情包

在博客园的设置中可以看到「页首Html代码」这一项. 首先要申请 JS 权限,理由就是想要美化博客.设置鼠标点击特效等,自己补充. 「页首Html代码」处代码如下: <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array(&qu

博客园添加鼠标粒子吸附特效

本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博客园的[管理] → [设置]→ 一直往下拉, 找到[博客侧边栏公告(支持HTML代码)(申请JS权限)] 向[email protected] 发送邮件, 为了尽快通过权限申请, 邮件模板如下: 尊敬的博客园管理员: 请问是否可以帮我开通js权限,我需要一些简单的js来解决问题,例如鼠标点击特效.代

博客园自定义鼠标点击特效

需要申请JS权限,JS权限申请通过之后,将如下代码放入侧边栏,页首,页末,都可以 复制如下代码 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?Linux?","?Shell?"

博客园添加旋转的正方体特效

哇,这个旋转的正方体特效也十分好看呢 参考链接:https://www.cnblogs.com/Trojan00/p/9497480.html 效果展示 具体步骤 将代码复制即可 代码如下:(在博客侧边栏公告(支持HTML代码)中粘贴即可) <style> /*最外层容器样式*/ .wrap { width: 100px; height: 100px; margin: 150px; position: relative; } /*包裹所有容器样式*/ .cube { width: 50px;

博客园添加鼠标动态线条

说明:本人刚建立博客不久,看到其他博主的博客上有这么一个炫酷的 鼠标效果,捣鼓了一下,也整了一个 参考链接:https://www.cnblogs.com/php-linux/p/10565156.html 效果展示 只要将鼠标放在一边不动,就会有线条聚集到鼠标,是不是很炫酷呢 具体步骤 第一步:首先要做的就是申请权限,没有权限是做不了的 进入博客页面后→在导航栏中点击“管理”→选择“设置”→ 在“博客侧边栏公告(支持HTML代码)”,若没有js权限, 会显示申请权限:若有js权限,则显示支持j

博客园添加背景音乐,背景效果!

目录 博客园添加背景音乐,背景效果 申请博客园JS权限 添加网易云背景音乐 点击鼠标点击样式 二次元看板娘 雪花效果 原文地址:https://www.cnblogs.com/1212dsa/p/11438461.html

为博客园添加目录的方法总结

博客园添加目录的方法主要涉及2个步骤: 1.申请开通js权限 2.添加js脚本到“页脚Html代码” <script language="javascript" type="text/javascript"> // 生成目录索引列表 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html // modified by: zzq function GenerateContentList() { var

博客园添加markdown文章导航栏

博客园添加Markdown文章导航栏 我正在翻译Spring Framework文档,发布到博客园之后发现文章太密集,猛一看到比较懵,由于看到博客园支持自定义页面,我觉得添加一个导航栏,结构上会更加清晰一些. 所以在网上搜了搜关于添加导航栏的文章,搜到一个试了试,有些问题,所以就自己写了一个,实现功能如下: 主要搜索主页面中的h1-h6 根据1-6的级别设置字体大小和缩进宽度 滚动时页面最上方的标题对应导航将加粗 支持展开隐藏(默认隐藏,如果默认打开,就将js代码第6行display:none改

【转】为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html 目录 第一种:在正文上方直接添加目录 1. 申请开通js权限 2. 添加js脚本到“页脚Html代码” 3. 按格式写文章 第二种:在文章右上角添加目录导航 1. 申请开通js权限 2. 添加css代码到“页面定制CSS代码” 3. 添加js脚本到“页首Html代码” 4. 按格式写文章 参考链接:http://www.cnblogs.com/xdp-gacl/p