想实现个图片掉落效果,用JS或者JQ实现

JavaScript06

想实现个图片掉落效果,用JS或者JQ实现,第1张

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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>

小球的起始跌落高度<input id="input" type="text" value=""/><input id="button" type="button" value="开始"/>

<div id="output"></div>

<script>

function sb(h,s,n){

return h<1?{n,s}:sb(h/2,s+h+h/2,n+1)

}

button.onclick=function(){

var gd=parseInt(input.value)

var res=sb(gd,0,0)

output.innerHTML="小球的回弹次数是"+res.n+"<br />小球走过的路程是"+res.s

}

</script>