jq模仿雨滴下落的动画

效果如图：

实现思路：定时器每隔x秒生成宽高、下落速度（即动画执行时间）、left随机的div。

1.CSS：

body{overflow: hidden;/*这是为了防止出现滚动条*/
}
.com{border-radius: 0 50% 50% 50%;background: skyblue;transform: rotate(45deg);position: absolute;top: 0;
}

2.JS:

$(function(){var obj={maxW:100,//最大宽度minW:10,//最小宽度maxSpeed:10000,//最大速度，单位mscreat:400//创建雨滴个数的快慢，单位ms
    }rain(obj)
})
function rain(obj){var maxW=obj.maxW;var minW=obj.minW;var maxSpeed=obj.maxSpeed;var time=obj.creat;var maxLeft=$(window).width();var time1;var j=0;time1=setInterval(function(){var width=Math.random()*maxW;//随机宽度width=width.toFixed(2);if(width<minW){width=minW;}var left=Math.random()*maxLeft-width;//随机left值left=left.toFixed(2);if(left<0){left=0;}j++;var speed=Math.random()*maxSpeed;//随机速度var item='<div class="com rain'+j+'" style="left:'+left+'px;width:'+width+'px;height:'+width+'px"></div>';//创建雨滴
            $("body").append(item);move($(".rain"+j),speed);//雨滴移动
    },time)
}
function move(op,speed){var winH=$(window).height();var maxH=winH+op.height();//雨滴下落的高度，页面高度加上自身高度就能看到完全落到最底部
        op.animate({"top":maxH+"px"},speed,function(){op.remove();//删除该雨滴
    });
}

本来最开始想计算雨滴left和下落高度的最大值，以免出现滚动条，但是后来想直接body加个overflow：hidden不是更好么，省去多余的代码，效果还一样。

除了用JS实现，还可以用canvas来实现。

转载于:https://www.cnblogs.com/zjjDaily/p/8472579.html

jq模仿雨滴下落的动画相关推荐

html自定义动画让元素下落,jQuery实现的模仿雨滴下落动画效果
本文实例讲述了jQuery实现的模仿雨滴下落动画效果.分享给大家供大家参考,具体如下: 效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: ...
JQ彩色3D纸片折叠动画
JQ彩色3D纸片折叠动画闲着无聊做了一个玩~ 因是JQ制作,开始前请引入js <script src="http://libs.baidu.com/jquery/1.8.3/jque ...
手把手教你solidworks重力下落物体动画制作
手把手教你solidworks重力下落物体动画制作 1.首先建立装配体,导入圆柱和圆弧面. 2.对它们进行装配,配合方式为相切,配合的面为圆柱的圆弧面和绿色零件的弧面.然后再用宽度配合,宽度选择为圆柱 ...
模仿新浪微博雷达搜索动画效果
模仿新浪微博雷达搜索动画效果昨天更新的了新浪微博看到个好玩的玩意,雷达搜索,功能就不介绍了,当然作为安卓开发的第一眼看到的不是功能,而是搜索界面的雷达搜索动画效果,然后思绪了一下就模仿了写了一个,当 ...
iOS 模仿系统的抖动动画
模仿系统的抖动动画,主要用的是CAKeyframeAnimation(见之前篇博文)和NSTimer,不多说直接上代码. #define degreesToRadians(x) (M_PI*(x)/1 ...
74行代码实现浪漫的红心下落的动画效果
七夕节快到了,让我们使用 74 行的纯 HTML/JavaScript 代码,实现一个浪漫的红心下落的动画效果吧. 将下列代码粘贴到一个空白的 html 文件里,用浏览器本地打开即可. <htm ...
02_使用jq实现进入和离开动画
创建进入时的动画: 这一步很简单 index.html: <!DOCTYPE html> <html lang="en"><head><m ...
【Cocos2d-x】模仿热血传奇开门动画
一.准备素材传奇登录场景背景资源在ChrSel.wzl文件中,背景图索引是22号,开门动画是24~32号(共9张). 至于图片提取,可以参考之前写过的一篇关于热血传奇资源文件的文章https://b ...
实现京东狗下落的动画
点击屏幕任意位置,出现京东狗,京东狗从点击的位置开始下落.京东狗掉下来的时候不断的变小,回弹的时候不断的变大,直至能量耗尽. <!DOCTYPE html> <html lang=& ...
html 实现雨滴落下动画效果
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...

jq模仿雨滴下落的动画

jq模仿雨滴下落的动画相关推荐

最新文章

热门文章