• 首頁 > 上網技巧 > 電腦小技巧 > 網站飄雪花效果JS代碼

    網站飄雪花效果JS代碼

    時間:2019-08-26 15:13 作者:QQ地帶 我要評論

    如題,其實雪花效果并不是什么新鮮的花樣了,網上有很多現成的,我在2014年圣誕節🎄的時候用jQuery也寫過雪花的效果(傳送門),今天突然想著給自己博客加點啥效果,canvas和svg的特效網上也有很多,不過目前我先不考慮,就用原生js搞個簡單些的能用就可以了。
     
    于是,就想到了❄️雪花❄️飄飄~~
     
    具體效果呢,可以參考本站。
     
    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中去即可,其中雪花的大小、顏色、飄落速度啥的都可以自行修改。

    標簽: JS
    頂一下
    (0)
    0%
    踩一下
    (0)
    0%

    Google提供的廣告

    pk10最牛稳赚计划软件
  • 花花公子电子娱乐网址是多少 河南11选5现场直播 天天彩福彩四走势图 七星彩特区彩票论坛 永利娱乐城口碑 今期神童一肖平特图 湖北福彩30选5开奖号 时时彩看走势图做号技巧 河南快3官网版下载安装 开奖助手下载 最新奔驰游戏网址 潮乐二串 39元送2元彩票京券 360双色球 黑龙江十一选五走势图爱彩乐