zoukankan      html  css  js  c++  java
  • JQ_下雪特效

    这是一个jQuery下雪特效。
    特效的代码如下:

    <style>
    body{background:black;color:white}
    </style>
    <script>
    /**
    * js网页雪花效果jquery插件 
    * 柯乐义 keleyi.com 整理
    * http://keleyi.com/a/e8t7hoj4.htm
    */
    (function($){

    $.fn.snow = function(options){

    var $flake = $('<div id="snowbox-k'+'eleyi-com" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'),
    documentHeight = $(document).height(),
    documentWidth = $(document).width(),
    defaults = {
    minSize : 10, //雪花的最小尺寸
    maxSize : 20, //雪花的最大尺寸
    newOn : 1000, //雪花出现的频率
    flakeColor : "#FFFFFF" //柯乐义 keleyi.com 整理
    },
    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 - 40,
    endPositionLeft = startPositionLeft - 100 + 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);</script>

    <script>
    $(function(){
    $.fn.snow({ 
    minSize: 5, //雪花的最小尺寸
    maxSize: 50, //雪花的最大尺寸
    newOn: 300 //雪花出现的频率 这个数值越小雪花越多
    });
    });
    </script>

  • 相关阅读:
    js引用类型赋值不改变原对象值
    VS2017启动实例调试(谷歌浏览器)闪退问题
    ext6时间控件(带时分秒)
    extjs列表中文件上传与下载(带有重命名操作)
    c# word(1) 向标签处添加文字
    关于页面加载后执行使用afterrender
    ExtJS,grid多选框列
    vue起手式
    Javascript诞生与历史
    markdown语法说明
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4668524.html
Copyright © 2011-2022 走看看