下雪js代码

3 篇文章 0 订阅
1 篇文章 0 订阅

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background-color:black;
border:0px;

}
img{
position:absolute;


}
</style>
</head>
<body>
<!-- 1.给body添加样式背景色黑色
1.去掉自带8个像素外边框
2.开启定时器 每隔10毫秒执行,在定时器里面创建img,图片设置为snow.png,并添加到页面
3.给img 添加样式 修改为绝对定位
4.获取20-40随即数作为图片width
5.获取随即值left 取值范围(0-屏幕宽)并设置给img
6.添加完图片后,让图片作从顶部到底部的移动动画参考demo05移动到底部后淡出,淡出后删除图片
7.想办法让雪花的移动速度合雪花大小建立关系越小越快
 -->
 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
setInterval(function(){
    var img=$("<img src='snow.png'>");
    $("body").append(img);
    var width=20+parseInt(Math.random()*20);
    img.css("width",width+"px");
    var ww=$(window).width();
    var left=parseInt(Math.random()*ww);
    img.css("left",left+"px");
    var  wheight= $(window).height();
    img.animate({"top":wheight+"px"},1000).fadeOut(1000,function(){
        img.remove();
    })
},50)
</script>
</body>
</html>

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饭九钦vlog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值