百度地图 前端开发 |
前端开发网课百度云 |
百度前端开发规范 |
用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前端开发课程百度云 |
评论前必须登录!
注册