技巧——美化博客

Posted travelller

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了技巧——美化博客相关的知识,希望对你有一定的参考价值。

可能是我没学好js,总觉得js的代码透露着一股诡异...

 

0.注意首先申请js权限。

 

1.鼠标单击:社会主义特效

技术分享图片
 1 <script type="text/javascript">
 2 https://www.dujin.org/9088.html */
 3 var a_idx = 0;
 4 jQuery(document).ready(function($) {
 5  $("body").click(function(e) {
 6  var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
 7  var $i = $("<span/>").text(a[a_idx]);
 8  a_idx = (a_idx + 1) % a.length;
 9  var x = e.pageX,
10  y = e.pageY;
11  $i.css({
12  "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
13  "top": y - 20,
14  "left": x,
15  "position": "absolute",
16  "font-weight": "bold",
17  "color": "#ff6651"
18  });
19  $("body").append($i);
20  $i.animate({
21  "top": y - 180,
22  "opacity": 0
23  },
24  1500,
25  function() {
26  $i.remove();
27  });
28  });
29 });
30 </script>
鼠标单击:社会主义特效

(在“管理->设置”中的【页首Html代码】直接添加即可)

 

2.鼠标单击:小心心特效

技术分享图片
 1 <script type="text/javascript" >
 2 
 3 //-------------------------------封装的 点击心 形 自动执行
 4     !function(e, t,evt) {
 5     // 元素属性赋值
 6     function r() {
 7         for (var e = 0; e < s.length; e++)
 8         {
 9             if(s[e].alpha <= 0)
10             {
11                 t.body.removeChild(s[e].el), s.splice(e, 1);
12             }else{
13                 s[e].y--, 
14                 s[e].scale += .004,
15                 s[e].alpha -= .013,
16                 s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999";
17             } 
18         }     
19         requestAnimationFrame(r);
20         return;
21     }
22     // 如果存在点击事件 执行动画
23     function n() {
24         var t = "function" == typeof e[evt] && e[evt];
25         e[evt] = function(e) {
26             t && t(), o(e);
27         }
28     }
29     // 创建元素并且定义初始属性数组
30     function o(e) {
31         var a = t.createElement("div");
32         a.className = "heart", s.push({
33             el: a,
34             x: e.clientX - 5,
35             y: e.clientY - 5,
36             scale: 1,
37             alpha: 1,
38             color: c()
39         }), t.body.appendChild(a)
40     }
41     // 定义样式文件并添加
42     function i(e) {
43         var a = t.createElement("style");
44         a.type = "text/css";
45         try {
46             a.appendChild(t.createTextNode(e))
47         } catch (t) {
48             a.styleSheet.cssText = e
49         }
50         t.getElementsByTagName("head")[0].appendChild(a)
51     }
52     // 返回随机色
53     function c() {
54         return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
55     }
56     // 执行动画兼容处理
57     var s = [];
58     e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
59     function(e) {
60         setTimeout(e, 1e3 / 60)
61         }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ‘‘;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
62     }(window, document,‘onclick‘);
63 
64 </script>
鼠标单击:小心心特效

(在“管理->设置”中的【页首Html代码】直接添加即可)

原文章链接

 

3.鼠标单击:烟花+小心心特效

技术分享图片
  1 <script type="text/javascript" >
  2 $(function(){
  3     var input_e=$("input");
  4     //javascript检测浏览器是否支持某些事件
  5     //typeof input["oninput"] == "undefined"
  6 
  7     var y=input_e.offset().top;
  8     var x=input_e.offset().left;
  9     var len=0;
 10     var firewNum=15;// 烟花个数
 11     11     // 点击页面 在鼠标位置 出现心形 烟花    
 12     $("body").click(function(ev){
 13         xin(ev); // 点击心形
 14         Fireworks(ev)// 点击烟花
 15     });
 16 
 17     // 鼠标点击出现心形
 18     function xin(ev)
 19     {
 20         var color=randColor();
 21         var div=document.createElement("div");
 22             div.className=‘heart‘;
 23             div.style.backgroundColor=color;
 24             div.style.left=ev.pageX+‘px‘;
 25             div.style.top=ev.pageY+‘px‘;
 26             document.body.append(div);
 27             var i=1;
 28         var t=setInterval(function(){
 29             div.style.top=div.offsetTop-2+‘px‘;
 30             i-=0.01;
 31             div.style.opacity=i;
 32             var scale=1+(1-i);
 33             div.style.transform=‘scale(‘+scale+‘,‘+scale+‘) rotate(45deg)‘;
 34             if(i<0.01 || div.style.top+div.offsetTop>=window.innerHeight)
 35             {
 36                 div.remove();
 37                 clearInterval(t);
 38             }
 39         },30)
 40     }
 41     
 42     // 随机色
 43     function randColor()
 44     {        
 45         var r=parseInt(Math.random()*256);
 46         var g=parseInt(Math.random()*256);
 47         var b=parseInt(Math.random()*256);
 48         var a=Math.random().toFixed(1)
 49         var color=‘rgba(‘+r+‘,‘+g+‘,‘+b+‘,‘+a+‘)‘;
 50         return color;
 51     }
 52 
 53     // 创建烟花
 54     function Fireworks(ev)
 55     {
 56         // 烟花一种颜色-- 90去掉注释
 57         /*var color=randColor();
 58         for(var i=0;i<firewNum;i++)
 59         {
 60             create(ev,color);
 61         }*/
 62         for(var i=0;i<firewNum;i++)
 63         {
 64             create(ev,null);
 65         }
 66     }
 67 
 68     function create(ev,color)
 69     {// 操作元素使用的 原生 js ,使用jquery 失败 取不到元素
 70         var div=document.createElement("div");
 71             div.className=‘Fireworks‘;
 72             div.style.backgroundColor=randColor();
 73         //    div.style.backgroundColor=color;
 74             div.style.left=ev.pageX+‘px‘;
 75             div.style.top=ev.pageY+‘px‘;
 76             document.body.append(div);
 77             var i=1;
 78             // 正负 -5右     +5左 
 79             var speedX =(parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*5 + 1); 
 80             // 向上 -0--17
 81             var speedY=-parseInt(Math.random()*18);
 82 
 83             var time=setInterval(function()
 84             {
 85                 ++i;
 86                 var left=div.offsetLeft+speedX;
 87                 var top=div.offsetTop+speedY+i;
 88                  // 加 i top 越来越大, 烟花下落,否则烟花向上飘 每次获取得div.offsetTop越来越大 速度越来越慢
 89                 div.style.left=left+‘px‘;
 90                 div.style.top=top+‘px‘;
 91                 if(div.offsetLeft+div.offsetWidth>window.innerWidth || div.offsetLeft<2 || div.offsetTop+div.offsetHeight>window.innerHeight || div.offsetTop<2 )
 92                 {
 93                     //如果超出屏幕 移除div 关闭定时器
 94                     div.remove();
 95                     clearInterval(time);
 96                 } 
 97                 
 98             },40)
 99     }
100 });
101 </script>
【页首Html代码】
技术分享图片
1  body{width:1000px; height:500px;}
2  input{ margin:100px; width:250px; height: 50px }
3 .Fireworks{width:4px; height: 4px; position: absolute;}
4 .heart{width: 10px;height: 10px;position: fixed;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ‘‘;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}
【页面定制CSS代码】

(添加两部分代码)

 

以上是关于技巧——美化博客的主要内容,如果未能解决你的问题,请参考以下文章

[美化] 博客园美化历程

记一次博客页面美化过程,分享代码.

[博客美化] 博客园SyntaxHighlighter代码高亮

博客园美化博客随笔目录

博客美化08.添加"扩大/缩小浏览区域大小" 按钮

代码:博客美化