<head>
<title>网页特效|Linkweb.cn/Js|---页面漫天飞雪</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
</head>
<body bgcolor="#000000" onLoad="snow()">
<script language="JavaScript">
<!--
N = 40
Y = new Array()
X = new Array()
S = new Array()
A = new Array()
B = new Array()
M = new Array()
V = (document.layers)?1:0
iH=(document.layers)?window.innerHeight:window.document.body.clientHeight
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth
for (i=0i <Ni++){
Y[i]=Math.round(Math.random()*iH)
X[i]=Math.round(Math.random()*iW)
S[i]=Math.round(Math.random()*5+2)
A[i]=0
B[i]=Math.random()*0.1+0.1
M[i]=Math.round(Math.random()*1+1)
}
if (V){
for (i = 0i <Ni++)
{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}
}
else{
document.write('<div style="position:absolutetop:0pxleft:0px">')
document.write('<div style="position:relative">')
for (i = 0i <Ni++)
{document.write('<div id="si" style="position:absolutetop:0left:0width:'+M[i]+'height:'+M[i]+'background:#fffff0font-size:'+M[i]+'"></div>')}
document.write('</div></div>')
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth
var T=(document.layers)?window.pageYOffset:document.body.scrollTop
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft
for (i=0i <Ni++){
sy=S[i]*Math.sin(90*Math.PI/180)
sx=S[i]*Math.cos(A[i])
Y[i]+=sy
X[i]+=sx
if (Y[i] >H){
Y[i]=-10
X[i]=Math.round(Math.random()*W)
M[i]=Math.round(Math.random()*1+1)
S[i]=Math.round(Math.random()*5+2)
}
if (V){document.layers['sn'+i].left=X[i]document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i]si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i]
}
setTimeout('snow()',10)
}
//-->
</script>
<script language="Javascript">
<!--
function selectAll(theField){
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//-->
</script>
</table>
</body>
在后台添加js特效可实现这样的效果。js代码为:<script language="JavaScript"><!--var no = 5//雪片数目var speed = 20//飘动速度。(值越大越慢)var ns4up = (document.layers) ? 1 : 0//当前浏览器类型,如果是NS则为1var ie4up = (document.all) ? 1 : 0//当前浏览器类型,如果是IE则为1var s, x, y, sn, csvar a, r, cx, cyvar i, doc_width = 800, doc_height = 600x = new Array()y = new Array()r = new Array()cx = new Array()cy = new Array()s = 8//每次下落的高度,越小越平滑,但是也越慢if (ns4up) { //以NS兼容方式doc_width = self.innerWidth//取页面宽度doc_height = self.innerHeight//取页面高度}elseif (ie4up) { //以IE兼容方式doc_width = document.body.clientWidth//取页面宽度doc_height = document.body.clientHeight//取页面高度}for (i = 0i <no++ i) { //根据前面定义的雪片数目写进相应数目的层initSnow()//随机初始化层的坐标if (ns4up) { //如果浏览器是NS//用layer作为雪片(星号)的容器document.write("<layer name=\"dot"+ i +"\" left=\"1\" ")document.write("top=\"1\" visibility=\"show\"><font color=\"red\">")document.write("*</font></layer>")}elseif (ie4up) { //如果浏览器是IE//用div作为雪片的容器document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")document.write("absoluteZ-INDEX: "+ i +"VISIBILITY: ")document.write("visibleTOP: 15pxLEFT: 15px\"><font color=\"red\">")document.write("*</font></div>")}}//初始化雪片,生成随机坐标function initSnow() {a = 6r[i] = 1sn = Math.sin(a)cs = Math.cos(a)cx[i] = Math.random() * doc_width + 1cy[i] = Math.random() * doc_height + 1x[i] = r[i] * sn + cx[i]y[i] = cy[i]}//计算雪花位置,从新位置上出现,看起来就像是新产生的一样。function makeSnow() {r[i] = 1cx[i] = Math.random() * doc_width + 1cy[i] = 1x[i] = r[i] * sn + cx[i]y[i] = r[i] * cs + cy[i]}//雪花下落的计算function updateSnow() {r[i] += sx[i] = r[i] * sn + cx[i]y[i] = r[i] * cs + cy[i]}//在NS浏览器上处理雪片下落的主程序function SnowdropNS() {for (i = 0i <no++ i) { //依次处理每片雪花updateSnow()//下落if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { //如果超出屏幕范围makeSnow()//则调整雪片到新位置上doc_width = self.innerWidth//更新页面宽度数据doc_height = self.innerHeight//更新页面高度数据}document.layers["dot"+i].top = y[i]//改变层的Y坐标,应用新的位置document.layers["dot"+i].left = x[i]//改变层的X坐标,应用新的位置}setTimeout("SnowdropNS()", speed)}//在IE浏览器上处理雪片下落的主程序function SnowdropIE() {for (i = 0i <no++ i) { //依次处理每片雪花updateSnow()//下落if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { //如果超出屏幕范围makeSnow()//则调整雪片到新位置上doc_width = document.body.clientWidth//更新页面宽度数据doc_height = document.body.clientHeight//更新页面高度数据}document.all["dot"+i].style.pixelTop = y[i]//改变层的坐标,应用新的位置document.all["dot"+i].style.pixelLeft = x[i]}setTimeout("SnowdropIE()", speed)//准备下一次下落过程。}if (ns4up) { //如果是NSSnowdropNS()//调用SnowdropNS使雪片下落}elseif (ie4up) { //如果是NSSnowdropIE()//调用SnowdropIE使雪片下落}--></script>说明:可以根据自己的需求根据说明进行相应参数的修改首先看一下效果,图片是直接截图的不会动,实际效果是动态的,不停的下雪花首先在店铺装修后台首页里添加一个自定义内容区,切换到代码编辑模式,把以下代码复制直接粘贴进去,发布即可
店铺的雪花代码,只要把海报图,换成你自已的就可以了
<div class="panelsdiv" style="height:633px">
<div class="sn-simple-logo footer-more-trigger" style="width:1920pxheight:0pxleft:50%top:autoborder:nonepadding:0margin:0line-height:1.5">
<div class="sn-simple-logo footer-more-trigger" style="width:1920pxheight:0pxleft:-960pxtop:autoborder:nonepadding:0margin:0line-height:1.5">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td>
<div class="wd_self_rel" style="position:relativewidth:1920pxheight:633pxbackground-color:transparentbackground-repeat:no-repeatbackground-image:url(//gdp.alicdn.com/imgextra/i2/677699202/TB2lVZUiFXXXXb4XpXXXXXXXXXX_!!677699202.jpg)background-attachment:scrollbackground-position:center top">
<div class="footer-more-trigger sn-simple-logo wd_self_abs WD_htmlWidget" style="padding:0border:0width:autoheight:autoline-height:inheritmargin:0left:0pxtop:0pxwidth:489pxheight:730pxoverflow:hidden">
<embed allowscriptaccess="never" flashvars="scene=taobao_shop" height="633" src="//vodcdn.alicdn.com/https/playercase0.0.1.swf?playerurl=http%3A%2F%2Fimg1.tbcdn.cn%2Ftfscom%2FT1lmk2Fk8bXXXtxVjX.swf" type="application/x-shockwave-flash" width="500" wmode="transparent"></embed>
</div>