给你的网站加上雪花飘飘的效果

具体效果呢,可以参考本站。

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中去即可,其中雪花的大小、颜色、飘落速度啥的都可以自行修改。

写在最后

好了,本文到此结束!

如果还有什么疑问或者建议,欢迎多多交流,如果觉得文章对你有帮助,打个赏,让我有更大的动力去创作,谢谢!写博客主要是用来总结、巩固知识点,加深自己对这个知识点的理解。同时希望帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。

人已赞赏
WP实用教程

WordPress主题代码禁止纯英文和日文评论

2019-12-19 17:30:22

WP实用教程

wordpress Ripro主题 专用首页分类导航-风格2教程

2020-1-12 15:50:27


版权免责声明

本资源仅用于个人学习测试使用,禁止用于任何商业环境,请于下载后24小时内 删除本资源!

本文所有相关技术/资源内容统一放在下载包里

  1. 1、本网站名称:指点聚源码
  2. 2、本站永久网址:https://www.zhidianju.com
  3. 3、站内所有资源均可通过日常签到等任务进行免费兑换,记得每日来本站签到哦~!(由于模板不是很完善签到 需刷新一下!)。
  4. 4、如果您觉得本站有帮助到您,也想给本站一些帮助。您可以再下方打赏本站。
  5. 5、如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
  6. 6、本站资源来源于互联网收集/个人购买,如有侵犯到您的权益,请查看【版权声明】
  7. 7、本站提供的所有资源均来自互联网搜索,站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁 止用于任何商业环境,任何人不得擅作它用,否则后果自负!请在下载24小时内删除!为尊重作者版权,请购买原版作品,支 持你喜欢的作者,谢谢!
  8. 8、本站资源大多存储在云盘,如发现链接失效 【链接失效】 我们会第一时间更新。本站提供的源码、模板、软件工具等其他资源, 都不包含技术服务 请大家谅解!
  9. 9、如遇到加密压缩包,默认解压密码为"www.zhidianju.com",如遇到无法解压的请联系管理员!
  10. 10、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索