……

博客美化,页首的飘雪效果

首先你的申请博客js权限

接着在页首html代码栏添加如下代码,即可

<script>
var flackColor = "#fff"; //雪片颜色
var newOne = 10;//间隔10毫秒
var flake = $( "<div></div>"). html( "❄"). css( "position", "absolute");
$( function(){
setInterval( function(){
var dWidth = $ ("#div_1"). width (); //获取页面宽度
var dHeight = $("#div_1"). height();//获取页面高度
var startLeft = dWidth* Math. random();//雪片随机出现位置
var endLeft = dWidth* Math. random();//雪片随机结束位置
var flakeSize= 5+ 50* Math. random();//雪片大小
var durationTime= 4000+ 7000* Math. random();
var startOpacity= 0.7+ 0.3* Math. random();//出现时雪片透明度
var endOpacity= 0.4+ 0.3* Math. random();//消失时图片透明度
flake. clone(). appendTo( $( "body")). css({
"left" :startLeft,
"top" : "-55px",
"opacity" :startOpacity,
"font-size" :flakeSize,
"color" :flackColor,
}). animate({
"left" :endLeft,
"top" :dHeight,
"opacity" :endOpacity
}, durationTime, function(){
$( this). remove();
})
}, newOne);
})
</script>
<div class="div_1" id="div_1"></div>

  

posted @ 2021-08-17 15:43  蟾宝  阅读(49)  评论(0编辑  收藏  举报