博客园相关
其实都是胡乱偷的
一、框架
主要来源——Zsnuo
Ps:博主调了好久的，这对不起她qaq，希望她能看到吧
二、各种杂名称
主要使用翻译侠以及百度翻译
三、各种图出处
四、存图
五、计数器
很良心，也有很多的样式
六、雪花特效
FEWY（略眼熟
<!DOCTYPE html> <html lang="en"> <body> <script> function snow() { // 1、定义一片雪花模板 var flake = document.createElement('div'); // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺ flake.innerHTML = '❆'; flake.style.cssText = 'position:absolute;color:#FFFAFA;'; //获取页面的高度 相当于雪花下落结束时Y轴的位置 var documentHieght = window.innerHeight; //获取页面的宽度，利用这个数来算出，雪花开始时left的值 var documentWidth = window.innerWidth; //定义生成一片雪花的毫秒数 var millisec = 100; //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花； setInterval(function() { //页面加载之后，定时器就开始工作 //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置 var startLeft = Math.random() * documentWidth; //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置 var endLeft = Math.random() * documentWidth; //随机生成雪花大小 var flakeSize = 5 + 20 * Math.random(); //随机生成雪花下落持续时间 var durationTime = 80000 + 11000 * Math.random(); //随机生成雪花下落 开始 时的透明度 var startOpacity = 0.7 + 0.3 * Math.random(); //随机生成雪花下落 结束 时的透明度 var endOpacity = 0.2 + 0.2 * Math.random(); //克隆一个雪花模板 var cloneFlake = flake.cloneNode(true); //第一次修改样式，定义克隆出来的雪花的样式 cloneFlake.style.cssText += ` left: ${startLeft}px; opacity: ${startOpacity}; font-size:${flakeSize}px; top:-25px; transition:${durationTime}ms; `; //拼接到页面中 document.body.appendChild(cloneFlake); //设置第二个定时器，一次性定时器， //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来； setTimeout(function() { //第二次修改样式 cloneFlake.style.cssText += ` left: ${endLeft}px; top:${documentHieght}px; opacity:${endOpacity}; `; //4、设置第三个定时器，当雪花落下后，删除雪花。 setTimeout(function() { cloneFlake.remove(); }, durationTime); }, 0); }, millisec); } snow(); </script> </body> </html>
<div class="Snow"> <canvas id="Snow"></canvas> </div> <script src="https://files.cnblogs.com/files/zxqxwnngztxx/xue.js"></script> <!--PageEndHtml Block End--> </body> </html>
/*雪花css*/
#Snow{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(255,255,240,0.1);
pointer-events: none;
}
/*雪花css end*/
七、动态标题
<script> // 浏览器标题切换 var OriginTitile = document.title; // 保存之前页面标题 var titleTime; document.addEventListener('visibilitychange', function(){ if (document.hidden){ document.title = '喔唷 ￣ω￣= 不小心崩溃辣~'; clearTimeout(titleTime); }else{ document.title = '呀! (o°ω°o)又好啦~ '; titleTime = setTimeout(function() { document.title = OriginTitile; }, 2000); // 2秒后恢复原标题 } }); </script>
八、评论图片旋转
注:附带表情包
/*头像旋转*/ .feedbackCon img:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } .feedbackCon img { border-radius: 40px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
九、移动端适配
@media (max-width: 601px) { #home { min-width: 0; } #home #header { width: 100%; position: fixed; display: block; } #home #header #blogTitle { background-position: left top; } #home #header #navigator { font-size: 15px; /* border-bottom: 1px solid #ededed; */ /* border-top: 1px solid #ededed; */ height: 35px; clear: both; /* margin-top: 25px; */ /* margin: 0px 20px; */ width: 100%; /* float: left; */ background: #222; margin: 0; } #home #header #navigator > ul#navList { height: 35px; } #home #header #navigator > ul#navList>li { height: 35px; margin: 0; } #home #header #navigator > ul#navList>li>a { height: 35px; line-height: 35px; } #home #header #navigator .blogStats { height: 35px; line-height: 35px; } #home #main { position: relative; min-width: 0; margin-top: 250px; bottom: 60px; } #home #main #mainContent { position: relative; float: none; margin: 0; } #home #main #mainContent .forFlow { margin: 0; } #home #main #mainContent div.commentform input.author { width: 100px; } #home #main #mainContent div.commentform textarea.comment_textarea { width: 100%; } #home #main #sideBar { display: none; } #home #main .postBody #cnblogs_post_body img { width: 100%; } } @media (min-width: 402px) and (max-width: 601px) { #navigator > ul#navList { animation: arrowup 10s linear 0 infinite alternate; -webkit-animation: arrowup 10s linear 0 infinite alternate; -moz-animation: arrowup 10s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 25% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 100% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } } } @media (min-width: 302px) and (max-width: 401px) { #navigator > ul#navList { animation: arrowup 15s linear 0 infinite alternate; -webkit-animation: arrowup 15s linear 0 infinite alternate; -moz-animation: arrowup 15s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 15% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 30% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 45% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 60% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 100% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } } } @media (min-width: 202px) and (max-width: 301px) { #navigator > ul#navList { animation: arrowup 20s linear 0 infinite alternate; -webkit-animation: arrowup 20s linear 0 infinite alternate; -moz-animation: arrowup 20s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 12% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 24% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 36% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 48% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 60% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 72% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } 100% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } } } @media (max-width: 201px) { #navigator > ul#navList { animation: arrowup 20s linear 0 infinite alternate; -webkit-animation: arrowup 20s linear 0 infinite alternate; -moz-animation: arrowup 20s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 6% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 12% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 18% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 24% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 30% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 36% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 42% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } 48% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } 54% { transform: translate3d(0, -168px, 0); -webkit-transform: translate3d(0, -168px, 0); -moz-transform: translate3d(0, -168px, 0); } 60% { transform: translate3d(0, -168px, 0); -webkit-transform: translate3d(0, -168px, 0); -moz-transform: translate3d(0, -168px, 0); } 66% { transform: translate3d(0, -210px, 0); -webkit-transform: translate3d(0, -210px, 0); -moz-transform: translate3d(0, -210px, 0); } 72% { transform: translate3d(0, -210px, 0); -webkit-transform: translate3d(0, -210px, 0); -moz-transform: translate3d(0, -210px, 0); } 78% { transform: translate3d(0, -252px, 0); -webkit-transform: translate3d(0, -252px, 0); -moz-transform: translate3d(0, -252px, 0); } 84% { transform: translate3d(0, -252px, 0); -webkit-transform: translate3d(0, -252px, 0); -moz-transform: translate3d(0, -252px, 0); } 90% { transform: translate3d(0, -296px, 0); -webkit-transform: translate3d(0, -296px, 0); -moz-transform: translate3d(0, -296px, 0); } 100% { transform: translate3d(0, -296px, 0); -webkit-transform: translate3d(0, -296px, 0); -moz-transform: translate3d(0, -296px, 0); } } }
十、鼠标点击以及样式
<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("Hello","World"); 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(72,85,137)" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
a:hover { cursor:url("http://www.005.tv/templets/muban/moe_style/image/cur/2.cur"),auto;}
body { cursor:url("http://www.005.tv/templets/muban/moe_style/image/cur/1.cur"),auto;}
十一、生成目录
<script language="javascript" type="text/javascript"> // 生成目录索引列表 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html // modified by: zzq function GenerateContentList() { var mainContent = $('#cnblogs_post_body'); var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可 if(mainContent.length < 1) return; if(h2_list.length>0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>LIST</b></p>'; content += '<ul>'; for(var i=0; i<h2_list.length; i++) { var go_to_top = '<div style="text-align: right"><a href="#_labelTop">Return Top</a><a name="_label' + i + '"></a></div>'; $(h2_list[i]).before(go_to_top); var h3_list = $(h2_list[i]).nextAll("h3"); var li3_content = ''; for(var j=0; j<h3_list.length; j++) { var tmp = $(h3_list[j]).prevAll('h2').first(); if(!tmp.is(h2_list[i])) break; var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>'; $(h3_list[j]).before(li3_anchor); li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>'; } var li2_content = ''; if(li3_content.length > 0) li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; else li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>'; content += li2_content; } content += '</ul>'; content += '</div><p> </p>'; if($('#cnblogs_post_body').length != 0 ) { $($('#cnblogs_post_body')[0]).prepend(content); } } $(mainContent[0]).prepend(qqinfo); } GenerateContentList(); </script>
十二、返回顶部
<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>
