1. 程式人生 > 實用技巧 >隨筆-部落格園美化

隨筆-部落格園美化

豬寶店美化程式碼

背景調整

#頁面定製CSS程式碼中:
body {
    color: 	#000000;
    background:url(https://w.wallhaven.cc/full/l3/wallhaven-l392mr.jpg) fixed;
    background-position:center;
    background-size:cover;
    background-repeat: no-repeat;
    font-family: "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 14px;
    min-height: 101%;
    opacity: 0.8;
}

禁止右鍵複製

#頁面定製CSS程式碼:
html,body {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

新增背景人物

#部落格側邊欄公告:
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
  L2Dwidget.init({ "model": { jsonPath:
  "https://unpkg.com/[email protected]/assets/shizuku.model.json",
  "scale": 1 }, "display": { "position": "right", "width": 100, "height": 200,
  "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.9 },
  "react": { "opacityDefault": 1.0, "opacityOnHover": 0.2} });
</script>

滑鼠點選效果

#頁首HTML程式碼
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤可愛小寶❤","❤可愛大寶❤","❤豬寶店❤","❤❤❤","✰✰✰");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999,
"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>

粒子吸附效果

#頁尾HTML程式碼
<script id="c_n_script" 
src="https://blog-static.cnblogs.com/files/xiaokang01/js.js"
color="240,230,140" 
opacity="2.0" 
count="200" 
zindex="-5">if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
{
}
else
{       }
</script>

五角星墜落效果

#頁尾HTML程式碼
<script id="c_n_script" 
<script type="text/javascript">
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('✰'),
    documentHeight     = $(document).height(),
    documentWidth    = $(document).width(),
    defaults = {
        minSize        : 5,
        maxSize        : 25,
        newOn        : 500,
        flakeColor    : getRandomColor() /* 此處可以定五角星顏色*/
    },
    options    = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: getRandomColor()
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear',function(){
        $(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 10, /* 定義五角星最小尺寸 */
        maxSize: 100,/* 定義五角星最大尺寸 */
        newOn: 300 /* 定義密集程度,數字越小越密集 */
    });
});
var getRandomColor = function(){
  return '#'+Math.floor(Math.random()*16777215).toString(16); 
}
</script>