论坛下雪效果 - 其他代码 - 代码美化

/ 1 页

返回列表发帖

查看: 983|回复: 0

返回底部

论坛下雪效果 [复制链接]

無名

电梯直达 楼主

发表于 2023-12-20 07:26 | 只看该作者倒序看帖字体大小:

阅读模式

1、新建 jsnow 模板，内容：

(function ($) {
$.fn.jSnow = function (h) {
var j = $.extend({}, $.fn.jSnow.defaults, h);
var k, WIN_HEIGHT;
var l = j.flakes;
var m = j.flakeCode;
var n = j.flakeColor;
var o = j.flakeMinSize;
var p = j.flakeMaxSize;
var q = j.fallingSpeedMin;
var r = j.fallingSpeedMax;
var s = j.interval;
var t = j.zIndex;
var vs = j.vSize;
var fa = j.fadeAway;
var fs = j.followScroll;
setWaH();
var useGif = false;
//if ($.browser.msie && (parseFloat($.browser.version) < 8))useGif = true;
if ($('body').is('.lt-ie8 *')) {
useGif = true;
}
//if ($.browser.msie && (parseFloat($.browser.version) < 8) && t == "auto")t = 0;
if ($('body').is('.lt-ie8 *') && t == "auto")t = 0;
var u = $("<div \/>");
u.css({
width: k + "px",
height: 1,
display: "block",
overflow: "visible",
position: "absolute",
left: "1px",
zIndex: t
});
if (fs) {
u.css('top', $("html").scrollTop() + 1 + "px");
} else {
u.css = '1px';
}
$("body").prepend(u).css({height: "100%"});
$("html").css({"overflow-y": "scroll", "overflow-x": "hidden"});
var v = Array();
generateFlake(l, false);
setInterval(animateFlakes, s);
window.onresize = setWaH;
function setWaH() {
k = $('body').width();
var def_h = window.innerHeight || document.documentElement.clientHeight;
def_h -= 50;
if (!vs || vs > def_h ) {
WIN_HEIGHT = window.innerHeight || document.documentElement.clientHeight
WIN_HEIGHT -= 50;
} else WIN_HEIGHT = vs;
};
if (fs) {
window.onscroll = function () {
u.css({top: $("html").scrollTop() + "px"})
};
}
function generateFlake(a, b) {
a = a || 1;
b = b || false;
var i = 0;
for (i = 0; i < a; i++) {
var c = $("<span \/>");
var d = o + Math.floor(Math.random() * p);
var e = m[Math.floor(Math.random() * m.length)];
if (e.indexOf(".gif") != -1 || e.indexOf(".png") != -1) {
var f = new Image();
if (useGif)e = e.replace("png", "gif");
f.src = e;
e = "<img src='" + e + "' alt='jSnowFlake'>"
}
c.html(e).css({
color: n[Math.floor(Math.random() * n.length)],
fontSize: d + "px",
display: "block",
position: "absolute",
cursor: "default",
"pointer-events": "none",
"z-index": t
});
$(u).append(c);
f_left = Math.floor(Math.random() * (k - c.width() - 50)) + 25;
f_top = (b) ? -1 * c.height() : Math.floor(Math.random() * (WIN_HEIGHT - 50));
var g = Math.floor(Math.random() * 90);
jQuery.data(c, "posData", {
top: f_top,
left: f_left,
rad: Math.random() * 50,
i: Math.ceil(q + Math.random() * (r - q)),
swingRange: g
});
c.css({top: f_top + "px", left: f_left + "px"});
v.push(c)
}
};
function animateFlakes() {
var i = 0;
for (i = v.length - 1; i >= 0; i--) {
var f = v[i];
var a = jQuery.data(f, "posData");
a.top += a.i;
var b = Number();
b = Math.cos((a.rad / 180) * Math.PI);
a.rad += 2;
var X = a.left - b * a.swingRange;
if (fa) {
op = (WIN_HEIGHT - a.top < 100) ? ((WIN_HEIGHT - a.top) / 100) : 1;
f.css('opacity', op);
}
f.css({top: a.top + "px", left: X + "px"});
if (a.top > WIN_HEIGHT) {
jQuery.removeData(f);
f.remove();
v.splice(i, 1);
generateFlake(1, true)
}
}
};
return this
};
$.fn.jSnow.defaults = {
flakes: 30,
fallingSpeedMin: 1,
fallingSpeedMax: 3,
flakeMaxSize: 20,
flakeMinSize: 10,
flakeCode: ["•"],
flakeColor: ["#fff"],
zIndex: "auto",
interval: 50,
fadeAway: true,
}
})(jQuery);

复制代码

2.新建 snow-effect 模板，内容：

(function ($) {
"use strict";
$(window).on("load", function () {
if (!snoweffect.show) return;
jQuery().jSnow({
followScroll: true,
flakes: snoweffect.flakes_num,
fallingSpeedMin: parseInt(snoweffect.falling_speed_min),
fallingSpeedMax: parseInt(snoweffect.falling_speed_max),
flakeMaxSize: parseInt(snoweffect.flake_max_size),
flakeMinSize: parseInt(snoweffect.flake_min_size),
flakeColor: [snoweffect.flake_color],
vSize: snoweffect.vertical_size,
fadeAway: snoweffect.fade_away,
zIndex: snoweffect.flake_zindex,
flakeCode: ["&" + snoweffect.flake_type + ";"],
});
});
})(jQuery);

复制代码

3、新建 snow-js.min 模板，内容：

!function(t){"use strict";t(document).on("loadWPSnow",function(e,o,n,s,i,l,d,p,a,r,f){function y(t){return Math.floor(t*Math.random())}function c(){for(b=0;o>=b;b++)g[b]+=x[b],w[b].posY+=w[b].sink,w[b].style.left=w[b].posX+Y[b]*Math.sin(g[b])+"px",w[b].style.top=w[b].posY+"px",(w[b].posY>=m+2*w[b].size||parseInt(w[b].style.left)>v-3*Y[b])&&(w[b].posX=y(v-w[b].size),w[b].posY=2*w[b].size*-1);setTimeout(c,a)}function u(){for(z(),h(),b=0;o>=b;b++)g[b]=0,Y[b]=15*Math.random(),x[b]=.03+Math.random()/10,w[b]=document.getElementById("flake"+b),w[b].size=y(M)+p,w[b].style.fontSize=w[b].size+"px",w[b].style.fontFamily=s[y(s.length)],w[b].style.color=n[y(n.length)],w[b].style.position="absolute",w[b].style.zIndex=2500,w[b].sink=l*w[b].size/5,w[b].posX=y(v-w[b].size),w[b].posY=y(m+2*w[b].size),w[b].style.left=w[b].posX+"px",w[b].style.top=w[b].posY+"px";h(),c(),t("body").css({position:"relative"})}function h(){m=document.body.scrollHeight+0,v=document.body.clientWidth-0}function z(){var e='<div id="snow-container" style="pointer-events:none;position:absolute;height:100%;width:100%;top:0;bottom:0;right:0;z-index: 999999;overflow:hidden;">';for(b=0;o>=b;b++)e+="<span id='flake"+b+"' style='"+f+"top:-"+d+"'>"+i+"</span>";e+="</div>",t("body").append(e)}var m,v,w=[],b=0,x=[],g=[],Y=[],M=d-p;window.addEventListener("resize",h),window.addEventListener("load",u)})}(jQuery);

复制代码

4.把下面的代码添加到“网站第三方统计代码”或“其他头部信息”。

<script type='text/javascript' src='templates/模板名称/jsnow.htm'></script>
<script type='text/javascript' id='snow-effect-js-extra'>
/* <![CDATA[ */
var snoweffect = {"show":"1","flakes_num":"30","falling_speed_min":"1","falling_speed_max":"3","flake_max_size":"20","flake_min_size":"10","vertical_size":"800","flake_color":"#efefef","flake_zindex":"100000","flake_type":"#10053","fade_away":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='templates/模板名称/snow-effect.htm'></script>
<script type='text/javascript' src='templates/模板名称/snow-js.min.htm'></script>
<script type='text/javascript'>
(function( $ ) {
var snowMax = 45;
var snowColor = new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff");
var snowType = new Array("Times","Arial","Times","Verdana");
var snowEntity = "*";
var snowSpeed = 0.5;
var snowMaxSize = 50;
var snowMinSize = 22;
var snowRefresh = 50;
var snowZIndex = 2500;
var snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;";
jQuery(document).trigger( 'loadWPSnow', [ snowMax, snowColor, snowType, snowEntity, snowSpeed, snowMaxSize, snowMinSize, snowRefresh, snowZIndex, snowStyles ] );
})( jQuery );
</script>