jq模仿雨滴下落的动画
效果如图:
实现思路:定时器每隔x秒生成宽高、下落速度(即动画执行时间)、left随机的div。
1.CSS:
body{
overflow: hidden;/*这是为了防止出现滚动条*/
}
.com{
border-radius: 0 50% 50% 50%;
background: skyblue;
transform: rotate(45deg);
position: absolute;
top:;
}
2.JS:
$(function(){
var obj={
maxW:100,//最大宽度
minW:10,//最小宽度
maxSpeed:10000,//最大速度,单位ms
creat: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来实现。
jq模仿雨滴下落的动画的更多相关文章
- canvas入门级基本用法实现雨滴下落特效
canvas基础知识点参考各种文档,直接上代码,有非常详细注释 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- UWP 动画系列之模仿网易云音乐动画
一.前言 最近在弄毕业设计(那时坑爹选了制作个UWP商店的APP),一个人弄得烦躁,在这里记录一些在做毕业设计时的学习过程.由于我的毕业设计是做一个音乐播放器,那么Windows商店上优秀的软件当然是 ...
- jq初入行常用动画
--jq动画分类--(1)jQuery的动画其实就是将之前提到过的各种特效进行封装,并对其性能进行优化.(2)jQuery动画分为三个部分:非自定义动画,自定义动画,和全局动画设置. 一.非自定义动画 ...
- JQ效果 透明图片覆盖动画
效果图呈上 先说思路 1,一个固定的框架,有两张图片,一张是狗狗的,一张是练习方式,想把做好的练习方式隐藏 2,效果上想要从下面滑动出来,所以透明框定位在下面 3,整理需要的东西,缓慢升起需要动画效果 ...
- jQ图片列表光标移动动画
本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 效果展示: http://hovertree.com/texiao/jquery/88/ 效果图如下: 其中的jQ ...
- JQ模仿select
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JQ 模仿注册时等待的时间
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq模仿h5 placeholder效果
$(".pay-license input").on("input propertychange blur",function(){ if($(this).va ...
- mouse事件在JQ中的应用(在动画与交互中用得比较多).
mousedown与mouseup事件 用户交互操作中,最简单直接的操作就是点击操作,因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作,与其对应的还有一个方法mouse ...
随机推荐
- jQuery中foreach的continue和break
摘录自:http://blog.csdn.net/penginpha/article/details/12159389 1. continue. 可以使用return. $("***&quo ...
- python装饰器实现对异常代码出现进行监控
异常,不应该存在,但是我们有时候会遇到这样的情况,比如我们监控服务器的时候,每一秒去采集一次信息,那么有一秒没有采集到我们想要的信息,但是下一秒采集到了, 而后每次的采集都能采集到,就那么一次采集不到 ...
- CSS学习(一)
/*</br> * color</br> * background-color background-image background-repeat background-po ...
- x64内核HOOK技术之拦截进程.拦截线程.拦截模块
x64内核HOOK技术之拦截进程.拦截线程.拦截模块 一丶为什么讲解HOOK技术. 在32系统下, 例如我们要HOOK SSDT表,那么直接讲CR0的内存保护属性去掉. 直接讲表的地址修改即可. 但是 ...
- Tomcat xxx unbound
从别的地方import的代码 .出现apache unbound 第一步:选中项目右键Build Path->Configure Build Path-->选中Tomcat 7.0 unb ...
- jsp的语法
JSP指令和脚本元素指令 <%@ 指令%>声明 <%! 声明%>表达式 <%= 表达式%>代码段/脚本段 <% 代码段%>注释 <%-- 注释-- ...
- 汉诺塔python3函数编写和过程分析
!/usr/bin/env python3 -- coding: utf-8 -- 利用递归函数计算阶乘 N! = 1 * 2 * 3 * ... * N def fact(n): if n == 1 ...
- python _init_学习
今天继续学习python,接触了_init_,感觉很好玩照着教程手写了一些代码,感觉编程语言是互通的,只是换个了形式来表达 #coding=utf-8#类似于java的构造器class Person: ...
- CSS :befor :after 伪元素的妙用
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
- 使用redis所维护的代理池抓取微信文章
搜狗搜索可以直接搜索微信文章,本次就是利用搜狗搜搜出微信文章,获得详细的文章url来得到文章的信息.并把我们感兴趣的内容存入到mongodb中. 因为搜狗搜索微信文章的反爬虫比较强,经常封IP,所以要 ...