码迷,mamicode.com
首页 > Web开发 > 详细

自定义博客园模板/css/html/js

时间:2018-04-09 23:17:15      阅读:2212      评论:0      收藏:0      [点我收藏+]

标签:AC   rip   out   现在   flip   有一个   page   time   别人   

唔。。。。实在是找不到什么别的事情好干了,省选凉凉回去学文化课真的说实话很无聊。。。而且导致现在OI做题并没有什么目的性和系统性。。。还不如去做物理。。。

可能有对我博客样式感兴趣的朋友。。。我这里省去你们F12的时间来介绍一下我的博客模板吧。。。

首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯,连接在这,可以自己去看:博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)

这里着重感谢学姐帮我指导和完善了博客的样式。

看完了上面的应该就已经有了一个比较好的样式了,然后一点是鼠标的点击效果可能还不够精确,以至于不能变色什么的。。。其实我在学姐那博客底下也评论过了,不过是在不会修改的照搬我的也可以。。。

<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": 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>

然后就是一些细枝末节的东西了,比如右边的打赏(表示高中生暂时不需要这个啦),右上角的天气预报,网页的播放音乐之类的了。

先说一下那个自动播放的音乐,这个其实很好搞。。首先支持外联播放器的音乐平台貌似只有网易云和虾米。所以直接从网易云上找到你想要的歌,然后点击生成外链播放器,直接把flash的html代码扔到页首就可以了。

然后是那个右下角的小火箭。这个也好办,由于懒,我的js文件直接套用了学姐现成的。。。基于这一点,我们只需要在页尾添加这样的一串代码:

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png)no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $(#back-top).fadeIn();
        } else {
            $(#back-top).fadeOut();
        }
    });
    // scroll body to 0px on click
    $(#back-top a).click(function() {
        $(body,html).animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
     $("pre").addClass("prettyprint");
     prettyPrint();
})();
</script>

嗯,加上之后回去看看,小火箭已经在底下显示了。。。。

公告栏里的时间显示大家可能都感兴趣,这个好办,其实你把网页放大就可以看到那个时间显示的右下角有一个网站,你直接搜那个网站应该就有前辈们写的代码直接分享了,我在这也写上吧:

<div id="myTime"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="center">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" /><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="center" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object></div>

应该就是这样了。。

那个访问人数的统计可以直接点击进去自己设置,这个由于每个人的网页都是记录自己个人的,并没有办法套用别人的。应该会进入这个网站:

http://www.amazingcounters.com/

然后自己设置就可以。。

大致就是这样了。。。

至于左下角的pio酱,自己慢慢发掘吧,别想着直接copy哦,毕竟我现在还没完全搞好这个东西。。。。万一我那天换了js。。。后果自己看着办吧。。。

自定义博客园模板/css/html/js

标签:AC   rip   out   现在   flip   有一个   page   time   别人   

原文地址:https://www.cnblogs.com/victorique/p/8763273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!