var minSize=50;
var maxSize=100;
var newOn=200;
var flakeColor="#fff";
var flak=$("<div></div>").css({"position":"absolute","top":"-50px"}).html("<img src='timg.jpg'></img>");
$(function(){
    var dheight=$(document).height();//获取屏幕的高
    var dwidth=$(document).width();//获取屏幕的宽
    setInterval(function(){
        var startPostion=Math.random()*dwidth;//位置
        var startOpacity=0.7+Math.random()*0.3;//透明度
        var endPositionTop=dheight;//离定的高度
        var endPositionLeft=Math.random()*dwidth;//蔬菜一个左的随机数
        var durationFall=2000+Math.random()*3000;//时间
        var sizeFalsk=minSize+Math.random()*maxSize;//大小
        flak.clone().appendTo("body").css({//复制
            "left":startPostion,
            "opacity":startOpacity,
            "fontSize":sizeFalsk,
            "backgroundColor":flakeColor
            
        }).animate({//动画
            "top":endPositionTop,
            "left":endPositionLeft,
            "opacity":0.5
        },durationFall,function(){$(this).remove();});//移除事件
            
    
        },newOn);
    
    
    
    
    
});

需要的请留邮箱

javascript动画毛爷爷满天飘的更多相关文章

  1. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  3. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  4. JavaScript动画知多少?

    今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...

  5. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  6. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  7. Javascript动画效果(二)

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  8. Javascript动画效果(四)

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  9. 给力的轻量级JavaScript动画框架 - jsMorph

    jsMorph 是一个独立的轻量级 JavaScript 动画框架,可以用它来操纵多个 HTML 元素的样式,实现动画效果.此框架会自动检测起始位置.转换单位.调整渲染的速度,以此来获得更流畅的渲染体 ...

随机推荐

  1. ConfigParser-- 读取写入配置文件

    基础读取配置文件   -read(filename)               直接读取文件内容 -sections()                      得到所有的section,并以列表 ...

  2. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  3. 转换器5:参考Python源码,实现Php代码转Ast并直接运行

    前两个周末写了<手写PHP转Python编译器>的词法,语法分析部分,上个周末卡文了. 访问器部分写了两次都不满意,没办法,只好停下来,参考一下Python的实现.我实现的部分正好和Pyt ...

  4. Ef+T4模板实现代码快速生成器

    转载请注明地址:http://www.cnblogs.com/cainiaodage/p/4953601.html 效果如图,demo(点击demo可下载案例) 项目结构如图 T4BLL添加BLL.t ...

  5. Flask入门笔记(一)

    一.程序的基本结构 1.1 最简单的Flask程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #coding=utf-8 # 初始化 from flask import Fla ...

  6. MySQL基础入门-第一课 新建数据库(linux版本)

    MySQL linux 登录MySQL sudo ),name ),phone )  );  # 或者  ),name ),phone ));  数据类型 数据类型 大小(字节) 用途 格式 INT ...

  7. Tcl与Design Compiler (七)——环境、设计规则和面积约束

    本文属于原创手打(有参考文献),如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/  ,作者:IC_learner 本文的主要内容是讲解( ...

  8. PRINCE2认证

    PRINCE是PRoject IN Controlled Environment(受控环境下的项目管理)的简称. PRINCE2描述了如何以一种逻辑性的.有组织的方法,按照明确的步骤对项目进行管理.它 ...

  9. Sass实战 sass官网

    Sass实战 sass官网 1.相关视频教程:http://pan.baidu.com/s/1eSl8bUa 1.1我的项目源码:http://pan.baidu.com/s/1dFmqbyp 1.2 ...

  10. Python之路-Linux命令基础(6)

    作业一:完成作业未做完的集群架构 作业二:临时配置网络(ip,网关,dns)+永久配置 1.ip配置 [root@localhost mail]# ifconfig eno16777736 192.1 ...