想实现个图片掉落效果，用JS或者JQ实现 5
点击一张gif图，有三张图片会从上往下掉落，后台程序会给我传3个值1、2、3，如果值是1的话1.png图片会从上往下掉落，如果值是2的话2.png图片会从上往下掉落,值是...
点击一张gif图，有三张图片会从上往下掉落，后台程序会给我传3个值1、2、3，如果值是1的话1.png图片会从上往下掉落，如果值是2的话2.png图片会从上往下掉落,值是3的话3.png图片会从上往下掉落,就想实现这样的效果，要求是用JS或者JQ实现，求完整的 HTML CSS JS/JQ代码，多加分，谢谢~~~，最好代码中有注释
展开
1个回答
展开全部
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.8.2.js"></script>
<style type="text/css">
.imgs {
position:absolute;
top:-150px;
}
.img1{
left:0px;
}
.img2{
left:300px;
}
.img3
{
left:600px;
}
</style>
<script>
$(function () {
$(document).keydown(function (e) {
var height = $(window).height()-150;
if(e.keyCode==49||e.keyCode==97)
{
$(".img1").animate({ top: height }, 3000);
}
if (e.keyCode == 50 || e.keyCode == 98) {
$(".img2").animate({ top: height }, 3000);
}
if (e.keyCode == 51 || e.keyCode == 99) {
$(".img3").animate({ top: height }, 3000);
}
setInterval(function () { $(".imgs").css("top", "-150px") }, 1000);
});
})
</script>
</head>
<body>
<img src="images/1.jpg" class="img1 imgs" />
<img src="images/2.jpg" class="img2 imgs" />
<img src="images/3.jpg" class="img3 imgs" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.8.2.js"></script>
<style type="text/css">
.imgs {
position:absolute;
top:-150px;
}
.img1{
left:0px;
}
.img2{
left:300px;
}
.img3
{
left:600px;
}
</style>
<script>
$(function () {
$(document).keydown(function (e) {
var height = $(window).height()-150;
if(e.keyCode==49||e.keyCode==97)
{
$(".img1").animate({ top: height }, 3000);
}
if (e.keyCode == 50 || e.keyCode == 98) {
$(".img2").animate({ top: height }, 3000);
}
if (e.keyCode == 51 || e.keyCode == 99) {
$(".img3").animate({ top: height }, 3000);
}
setInterval(function () { $(".imgs").css("top", "-150px") }, 1000);
});
})
</script>
</head>
<body>
<img src="images/1.jpg" class="img1 imgs" />
<img src="images/2.jpg" class="img2 imgs" />
<img src="images/3.jpg" class="img3 imgs" />
</body>
</html>
更多追问追答
追问
点击的gif图呢？
追答
自己做后台取值
我做的是键盘取值
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
