前端Jq实现从天而降钞票雨
摘要： 百度地图 前端开发 前端开发网课百度云 百度前端开发规范 用jq写的一个钞票从天而下的效果，其中钞票产生时距离浏览器的左边距是随机，下降速度是随机的，下落的方向是随机的，透明度是随机的。数量……
| 百度地图 前端开发 |
| 前端开发网课百度云 |
| 百度前端开发规范 |
用jq写的一个钞票从天而下的效果，其中钞票产生时距离浏览器的左边距是随机，下降速度是随机的，下落的方向是随机的，透明度是随机的。数量的多少可以控制计时器循环的时间来改变多少。图片自己可以改成别的，比如表情，刀等等。祝大家玩的开心！欢迎批评交流！！！
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>标题</title>
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
th,
td,
a,
img,
span,
strong,
var,
em,
input,
textarea,
select,
option {
margin: 0;
padding: 0;
}
html,
body {
font-family: ‘微软雅黑’, ‘宋体’, Arail, Tabhoma;
font-size: 12px;
text-align: left;
}
ul,
ol {
list-style: none;
}
img {
border: 0;
}
input,
select,
textarea {
outline: 0;
}
textarea {
resize: none;
overflow: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
strong,
var,
em {
font-weight: normal;
font-style: normal;
}
a {
text-decoration: none;
}
body {
background: black;
}
</style>
</head>
<body></body>
<script>
var min = 5
var max = 50
var newone = 100
var xue = $(‘<div></div>’)
.css({
position: ‘absolute’,
top: ‘-50px’,
})
.html(
“<img src=’http://img.hibor.com.cn/sinaImg/U11470P31DT20150810091147.jpg’ style=’width:100px;’></img>”,
)
$(function() {
var he = $(document).height() – 10
var wid = $(document).width()
setInterval(function() {
var startl = Math.random() * wid //随机初始位置
var op = 0.8 + Math.random() * 0.2 //随机初始透明度
var end = he
var endl = Math.random() * wid //随机结束位置
var speed = 5000 + Math.random() * 3000
var si = min + Math.random() * max
xue.clone()
.appendTo(‘body’) //插入网页
.css({
left: startl,
opacity: op,
‘font-size’: si,
color: ‘white’,
})
.animate(
{
top: end,
left: endl,
opacity: ‘0.5’,
},
speed,
function() {
//回调函数，清除到底的div
$(this).remove()
},
)
}, newone)
})
</script>
</html>
| 黑马前端开发百度云 |
| 百度fex前端开发的前端组件 |
| web前端开发课程百度云 |
» 本文来自：前端开发者 » 《前端Jq实现从天而降钞票雨》
» 本文链接地址：https://www.rokub.com/6764.html
» 您也可以订阅本站：https://www.rokub.com
近期评论