javascript图片飘动效果

最新推荐文章于 2021-06-03 07:04:02 发布

原创最新推荐文章于 2021-06-03 07:04:02 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #border #image #function #table

Javascript脚本语言专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的网页动画实现方法，通过JavaScript控制图片在页面中模拟荡秋千的效果。图片会上下移动，实现类似荡秋千的动作，提供了一段具体的代码实现。

<html>
<head>
<title>会荡秋千的图片</title>
<body>
<table border=0 width=100% height=181>
<tr>
<td width=100% height=19>
   <p align=center>
   <span style="background-color:#ccffcc;font-size:10pt">会荡秋千的图片</span></td>
</tr>
<tr>
<td width=100% style="border:1 ridge:#00ffff"height=17>
<p align=center>
<span style="font-size:9pt">一个图片上下移动，像荡秋千一样！</span></p>
</td>
</tr>
<tr>
<td width=100% style="border:1 ridge:#00ffff" height=133 valign=bottom>
<img border=0 id="picture" name="" src="2.png" style="position:absolute;left:200;top:90" width=48 height=93>
</td>
</tr>
</table>
<script language="javascript">
var step=0;
var currentY;
var beMoveObj=new Image();
var window_height=document.body.offsetHeight;
beMoveObj=document.images["picture"];
var image_height=beMoveObj.height;
var top=Math.round((window_height+500)/2);
var bottom=Math.round((window_height-500)/2)-image_height;
var currentY=top;
var direction=1;
function startmove()
{
beMoveObj.style.top=currentY;
currentY-=step*direction;
if(currentY>=(top+bottom)/2){
   if(direction==1) step++;
   else step--;
}
else{
   if(direction==1) step--;
   else step++;
   }
if(currentY<=bottom){
   currentY=bottom;
   direction=-1;}
if(currentY>=top){
currentY=top;
direction=1;
}
setTimeout('startmove()',60);
}

startmove();
</script>
</body>
</html>