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(‘❄‘), ???????????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>
一些有意思的JS 小动画
原文地址:https://www.cnblogs.com/zygyun/p/9329385.html