分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

一些有意思的JS 小动画

发布时间:2023-09-06 02:04责任编辑:顾先生关键词:动画

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>

一些有意思的JS 小动画

原文地址:https://www.cnblogs.com/zygyun/p/9329385.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved