事件代码 ·

给自己的网站加一些天降修饰小物品

天降修饰小物品

先言:

  • 小编在一个源码里面看见了这个网站修饰,挺不错的.
  • 于是就给扒了下来,就分享给大家.

使用教程:

  • 复制. boay 代码粘贴到你网站首页文件的<body></body>之间.
  • 然后在网站新建js文件并放入 .js 代码文件.
  • 注意样式小图标需要自己下载放入网站目录里面!
  • 如果不懂的可以直接下载压缩包,然后将 .boay 文件放入网站首页即可!

效果演示:

给自己的网站加一些天降修饰小物品 事件代码 第1张

代码文件:

.body
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script src="./js/su.js"></script>
    <script>
        (function () {
            new WOW().init()
        })()
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('body').wpSuperSnow({
                flakes: ['./images/004.png', './images/003.png', './images/002.png',
                    './images/001.png'
                ],
                totalFlakes: '100',
                zIndex: '999999',
                maxSize: '30',
                maxDuration: '20',
                useFlakeTrans: false
            });
        });
    </script>
.js
(function(a){a.fn.wpSuperSnow=function(g){var q,h,r,b,s,n,f,t,m,l=a("head"),o=a("body"),p,u,d,k={flakes:[],totalFlakes:50,zIndex:999999,maxSize:50,maxDuration:25,useFlakeTrans:false},c=["wpSuperSnowFlake_l","wpSuperSnowFlake_r"],j=["wpSuperSnow_l","wpSuperSnow_r"];g=a.extend({},k,g);if(!g.flakes.length){return this}if(a.wpSuperSnowCSS){l.append('<style type="text/css">'+a.wpSuperSnowCSS+"</style>"),a.wpSuperSnowCSS=""}var e=function(v,i){v=(typeof v==="number")?v:0;i=(typeof i==="number")?i:Number.MAX_VALUE;return Math.floor(Math.random()*(i-v+1))+v};return this.each(function(){p=a(this),u="fixed";if(a.inArray(p[0].nodeName.toLowerCase(),["html","body"])===-1){p.css({position:"relative",overflow:"hidden"}),u="absolute"}d=[0,0,1,1,2,2,3,3,4,5,6,7,8,9,10];for(p=a(this),q=1;q<=Number(g.totalFlakes);q++){h=e(0,100);r=e(1,9);n=e(1,Number(g.maxSize));b=e(Math.floor(Number(g.maxDuration)/5),Number(g.maxDuration));s=(d.length)?d.shift():e(0,Math.floor(b/5));t=g.flakes[e(0,g.flakes.length-1)];f=(t.indexOf("flake")!==-1)?c[e(0,c.length-1)]:j[e(0,j.length-1)];m=a('<div class="wp-super-snow-flake"><img src="'+t+'" /></div>');m.css({width:n+"px",height:n+"px",position:u,"z-index":Number(g.zIndex),left:h+"%",top:"-200px",opacity:"0","user-select":"none","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","backface-visibility":"visible","-webkit-backface-visibility":"visible","-moz-backface-visibility":"visible","-ms-backface-visibility":"visible",animation:f+" "+b+"s infinite","animation-delay":s+"s","-webkit-animation":f+" "+b+"s infinite","-webkit-animation-delay":s+"s","-moz-animation":f+" "+b+"s infinite","-moz-animation-delay":s+"s","-ms-animation":f+" "+b+"s infinite","-ms-animation-delay":s+"s"}),a("img",m).css({width:"100%",height:"auto",border:0,opacity:(g.useFlakeTrans)?"."+r:1});p.append(m)}})};a.wpSuperSnowCSS="@keyframes wpSuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(500px,1500px,0) rotate(250deg);}}";a.wpSuperSnowCSS+="@keyframes wpSuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(-500px,1500px,0) rotate(-500deg);}}";a.wpSuperSnowCSS+="@-webkit-keyframes wpSuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(500px,1500px,0) rotate(250deg);}}";a.wpSuperSnowCSS+="@-webkit-keyframes wpSuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(-500px,1500px,0) rotate(-500deg);}}";a.wpSuperSnowCSS+="@-moz-keyframes wpSuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(500px,1500px,0) rotate(250deg);}}";a.wpSuperSnowCSS+="@-moz-keyframes wpSuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(-500px,1500px,0) rotate(-500deg);}}";a.wpSuperSnowCSS+="@-ms-keyframes wpSuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(500px,1500px,0) rotate(250deg);}}";a.wpSuperSnowCSS+="@-ms-keyframes wpSuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(-500px,1500px,0) rotate(-500deg);}}";a.wpSuperSnowCSS+="@keyframes wpSuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}";a.wpSuperSnowCSS+="@keyframes wpSuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}";a.wpSuperSnowCSS+="@-webkit-keyframes wpSuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}";a.wpSuperSnowCSS+="@-webkit-keyframes wpSuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}";a.wpSuperSnowCSS+="@-moz-keyframes wpSuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}";a.wpSuperSnowCSS+="@-moz-keyframes wpSuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}";a.wpSuperSnowCSS+="@-ms-keyframes wpSuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}";a.wpSuperSnowCSS+="@-ms-keyframes wpSuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}"})(jQuery);

小编提示:

  • 如果不想下载的小伙伴可以直接引用本站样式文件,长期稳定!
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script src="//www.yunmge.com/ys/35/js/su.js"></script>
    <script>
        (function () {
            new WOW().init()
        })()
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('body').wpSuperSnow({
                flakes: ['//www.yunmge.com/ys/35/images/004.png', '//www.yunmge.com/ys/35/images/003.png', '//www.yunmge.com/ys/35/images/002.png',
                    '//www.yunmge.com/ys/35/images/001.png'
                ],
                totalFlakes: '100',
                zIndex: '999999',
                maxSize: '30',
                maxDuration: '20',
                useFlakeTrans: false
            });
        });
    </script>

演示站点:

温馨提示:

本站资源全部来源于网络!若有侵权请发送相关内容至ymg@yunmge.com邮箱反馈,欢迎大家发邮箱留言想要的作品,我们会在往后的日子里进行更新!

相关下载

点击下载