最近看到博客园很多有个性的博客,觉得特别好。闲暇的时候也就来捣鼓一下,给自己的博客加了个返回顶部的小火箭。
浏览文章的时候就不用手动去拉滚动条了,很nice,有木有?
现在就讲这个制作过程,首先写一段代码
1 <div class="totop" style="width: 100px; height: 100px; padding: 5px; position: fixed; right: 50px; bottom: 50px;"> 2 <a style="text-decoration: none; width: 100%; height: 100%; display: block;" href="#"> 3 <em class="icon" style="width: 100px; height: 100px; display: block; background: url(http://files.cnblogs.com/files/cyppi/03.gif);"></em> 4 </a> 5 </div>
这个小火箭的按钮是绝对定位在右侧的,图片采用的是gif,因为能上传的图片格式有限,所以采用的就是熟悉的gif了。
图片是在博客的“文件”那里上传的,然后点击图片就能看到图片的路径了。
html代码在博客的“设置”那里,拷贝粘贴到页首html代码。
最后,小火箭返回顶部就完成。如果想要设计更有个性的博客,不妨去尝试,比如背景、加载、微信二维码等等。
不积跬步,无以至千里。快去设计你的个性博客吧!~non~
文末,再贴上最简单的loading效果:
<div class="loading" id="loading" width="100%" height="100%">加载中...</div>
1 #loading{ 2 width: 100%; 3 height: 100%; 4 background: #fff; 5 position: absolute; 6 z-index: 10000; 7 text-align: center; 8 font-size: 14px; 9 font-weight: 500; 10 color: #999; 11 }
1 function load(){ 2 setTimeout(function(){ 3 $('#loading').fadeOut(); 4 }, 1000) 5 6 }