zoukankan      html  css  js  c++  java
  • 纯代码为网站站点添加雪花飘落效果

    <script type="text/javascript">
    (function($){
       $.fn.snow = function(options){
       var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
       documentHeight     = $(document).height(),
       documentWidth  = $(document).width(),
       defaults = {
          minSize   : 10,
          maxSize   : 20,
          newOn     : 1000,
          flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
       },
       options = $.extend({}, defaults, options);
       var interval= setInterval( function(){
       var startPositionLeft = Math.random() * documentWidth - 100,
       startOpacity = 0.5 + Math.random(),
       sizeFlake = options.minSize + Math.random() * options.maxSize,
       endPositionTop = documentHeight - 200,
       endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
       durationFall = documentHeight * 10 + Math.random() * 5000;
       $flake.clone().appendTo('body').css({
          left: startPositionLeft,
          opacity: startOpacity,
          'font-size': sizeFlake,
          color: options.flakeColor
       }).animate({
          top: endPositionTop,
          left: endPositionLeft,
          opacity: 0.2
       },durationFall,'linear',function(){
            $(this).remove()
       });
       }, options.newOn);
        };
        })(jQuery);
    $(function(){
        $.fn.snow({
           minSize: 5, /* 定义雪花最小尺寸 */
           maxSize: 50,/* 定义雪花最大尺寸 */
           newOn: 300  /* 定义密集程度,数字越小越密集 */
        });
    });
    </script>
    

    网站站点添加雪花飘落效果,本段js代码依赖 JQurey,如果没效果,请确认网页是否已载入 JQurey

  • 相关阅读:
    第一次站立会议
    构建之法阅读笔记03
    软件工程概论学习进度条03
    四则运算三
    构建之法阅读笔记02
    软件工程概论学习进度条02
    四则运算二
    构建之法阅读笔记01
    软件工程概论学习进度条1
    软件工程个人作业01
  • 原文地址:https://www.cnblogs.com/webdom/p/10451163.html
Copyright © 2011-2022 走看看