具体效果呢,可以参考本站。
PS: 如果本站关闭了该特效的话,可以把下面分享的源码复制粘贴到自己的网站中去看效果。
好了,废话不多说了,现在就将源码贴出来。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<script type="text/javascript"> //~ snow雪花飘落特效 // 设置雪花数量(不建议超过30-40个) var snowmax = 30 // 设置雪的颜色,可添加任意颜色 var snowcolor = ["#FFDA65","#00AADD","#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff","#bbf7f9"] // 设置创建雪花的字体,可添加任意字体 var snowtype = ["Times","Arial","Verdana"] // 设置创建雪花的字母(推荐:*) var snowletter = "*" // 设置下沉速度(建议值范围为0.3到2) var sinkspeed = 0.6 // 设置雪花的最大大小 var snowmaxsize = 32 // 设置雪花的最小大小 var snowminsize = 8 // 设置下雪区,1:全屏,2:左侧,3:中间,4:右侧 var snowingzone = 1 /////////////////////////////////////////////////////////////////////////// var snow = [] var marginbottom var marginright var timer var i_snow = 0 var x_mv = [] var crds = [] var lftrght = [] var browserinfos = navigator.userAgent var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/) var ns6 = document.getElementById && !document.all var opera = browserinfos.match(/Opera/) var browserok = ie5 || ns6 || opera function randommaker(range) { rand = Math.floor(range * Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.scrollHeight - 80 marginright = document.body.clientWidth - 15 } else if (ns6) { marginbottom = document.body.scrollHeight - 80 marginright = window.innerWidth - 15 } var snowsizerange = snowmaxsize - snowminsize for (var i = 0;i <= snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i] = document.getElementById("s"+i) snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)] snow[i].size = randommaker(snowsizerange)+snowminsize snow[i].style.fontSize = snow[i].size+'px'; snow[i].style.color = snowcolor[randommaker(snowcolor.length)] snow[i].style.zIndex = 1000 snow[i].sink = sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx = randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx = randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy = randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+'px'; snow[i].style.top=snow[i].posy+'px'; } movesnow() } function movesnow() { for (var i = 0;i <= snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left = snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px'; snow[i].style.top = snow[i].posy+'px'; if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx = randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx = randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx = randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy = 0 } } var timer = setTimeout("movesnow()", 50) } for (var i = 0;i <= snowmax;i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { window.onload = initsnow } </script> |
只需要把这段代码复制粘贴到你自己网站的footer中去即可,其中雪花的大小、颜色、飘落速度啥的都可以自行修改。
写在最后
好了,本文到此结束!
如果还有什么疑问或者建议,欢迎多多交流,如果觉得文章对你有帮助,打个赏,让我有更大的动力去创作,谢谢!写博客主要是用来总结、巩固知识点,加深自己对这个知识点的理解。同时希望帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。