一些有意思的JS 小动画

Posted 2020-12-05 zyg_Fatty

1. 点击时,点击处生成向上漂浮的小红心

<script type="text/javascript">
var a_idx=0;
jQuery(document).ready(function($){$("body").click(function(e){
        var a=new Array("❤","❤","❤","❤","❤","❤","❤","❤","❤","❤","❤","❤");
        var $i=$("<span></span>").text(a[a_idx]);a_idx=(a_idx+1)%a.length;
        var x=e.pageX,y=e.pageY;
        $i.css({"z-index":999999999999999999999999999999999999999999999999999999999999999999999,"top":y-20,"left":x-20,"position":"absolute","font-weight":"bold","color":"#6699CC"});
        $("body").append($i);$i.animate({"top":y-180,"opacity":0},1500,function(){$i.remove();});
    });});
</script>

 

2.自动下雪.

<!--下雪  -->
<script type="text/javascript">
(function ($) {
    $.fn.snow = function (options) {
        var $flake = $(\'<div id="flake"/>\').css({\'position\': \'absolute\', \'top\': \'-50px\'}).html(\'&#x2744;\'),
            documentHeight = $(document).height(), documentWidth = $(document).width(),
            defaults = {minSize: 10, maxSize: 20, newOn: 500, flakeColor: "#FF9900"},
            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() * 200,
                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);
$.fn.snow({minSize: 25, maxSize: 60, newOn: 1000, flakeColor: \'#CCCCCC\'});
</script>