博客园富强民主文明和谐样式

最近很多人问我这个东西是怎么实现的。

那我就分享一下吧 :grin:

<!--富强民主点击特效-->
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
var b_idx = 0;
/*   文字和颜色数组 */
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var b = new Array("#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF","#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF");
jQuery(document).ready(function($) {
    $("body").click(function(e) { 

        var $i = $("<span/>").text(a[a_idx]);
          a_idx=parseInt(12*Math.random()); //文字随机数
          b_idx=parseInt(14*Math.random()); //颜色随机数
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999,
            "font-size":"1.3em",            //字体大小
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": b[b_idx]
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
<!--富强民主点击特效-->

  

复制上面的代码

粘贴到这里就好啦

 

有些模板和这份代码有CSS冲突

所以有可能显示不出来。。

 

时间: 2024-08-01 23:19:52

博客园富强民主文明和谐样式的相关文章

博客园如何设计自己的样式?

<!-- 在博客后台设置中先申请js权限,等审核通过后,再在页首.页脚Html代码添加下面的js代码. --> <!-- 页首Html代码: --> <canvas height="990" id="c_n9" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.1;" width="1920"> <

博客园自定义样式

我现在的博客园首页暂时应该是一个女生背景,一些星星的悬浮飘扬 那么我们怎么来设置博客园的自定义的样式,而不是不个性的默认界面呢? 第一步:进入你的首页,打开管理 => 设置 第二步:我在博客皮肤中选择了SimpleMemory,这个皮肤相对来说要轻快.干净,更方便你来修改你的样式. 第三步:事实上你可以禁用默认CSS,这也是允许的,不过就会弄成这样 学过前端的同学应该知道不掺杂任何任何的CSS就会出现这样的情况,这是浏览器默认给定的样式,而不是博客园给的CSS默认样式(所以你已经禁用了博客园的默

博客园页面定制

页面定制CSS代码 @font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: normal; src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/f

博客园添加鼠标点击特效

原文: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

博客园页面自定义美化分享。---------随时更新;

1.页面定制CSS代码: 1 /* 公共样式区域开始 */ 2 3 body,ol,ul,h1,h2,h3,h4,h5,h6,p,dl,dd,fieldset,legend,input,textarea,select { 4 margin: 0; 5 padding: 0; 6 } 7 8 body { 9 font: 12px "幼圆"; 10 word-wrap: break-word; 11 } 12 13 /* 去掉线 */ 14 a,u,s,del { 15 color: #

博客园的代码高亮

博客园自带的代码样式很难看,以下是如何自己设置代码的高亮. 1.点开HTML编辑. 2.找到代码位置,大致如下: 3.提炼成以下样式: <pre class='{0}'>内容</pre> 4.博客园已经默认支持 SyntaxHighlighter 插件. 只需在<pre>标签加入class样式即可,将{0}用如下样式替换,brush:java替换成实际语言brush:xxx(可自定义样式,但前面要有brush:xxx) class="brush: java;h

如何快速的自定义博客园背景图片

博客园的主题背景风格基本是简洁朴素风格,毕竟淳朴码农的撸码知识共享圣地不需要花里胡哨,但是作为新一代的撸码青年,我还是忍不住把博客园简单的美化了一下 打开https://sm.ms/ 上传一张你喜欢的图片,这个网站很好使,可以上传图片然后可以马上生成一条图片链接,就不需要我们自己维护图片了 然后在博客园设置中自行修改样式OK啦 background:url(https://i.loli.net/2018/07/24/5b56a0f45b6b6.jpg) no-repeat fixed; back

博客园鼠标点击特效代码

<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?",&

博客园鼠标效果:24字社会主义核心价值观

<script type="text/javascript"> $(document).ready(function(){ var a_index = 0; var c_index = 0; $("body").click(function(e){ var a = new Array("富强", "民主", "文明", "和谐", "自由", "