<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery仿直播app按钮点赞特效</title>
<style type="text/css">
img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }
.btn{ width: 100px; height: 30px; border:0; background: red; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; outline: none}
</style>
</head>
<body>
<div class="demo"></div>
<input id="btn" type="button" class="btn" value="点赞" />
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function(){
var x = 100;
var y = 400;
var num = Math.floor(Math.random() * 3 + 1);
var index=$('.demo').children('img').length;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(".demo").append("<img src=''>");
$('img:eq(' + index + ')').attr('src',+num+'.png');
$("img").animate({
bottom:"400px",
opacity:"0",
left: rand,
},3000)
})
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery仿直播app按钮点赞特效</title>
<style type="text/css">
img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }
.btn{ width: 100px; height: 30px; border:0; background: red; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; outline: none}
</style>
</head>
<body>
<div class="demo"></div>
<input id="btn" type="button" class="btn" value="点赞" />
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function(){
var x = 100;
var y = 400;
var num = Math.floor(Math.random() * 3 + 1);
var index=$('.demo').children('img').length;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(".demo").append("<img src=''>");
$('img:eq(' + index + ')').attr('src',+num+'.png');
$("img").animate({
bottom:"400px",
opacity:"0",
left: rand,
},3000)
})
})
</script>
</body>
</html>
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
