javascript 实现图片的飘动，就像广告那种

feyyee 2009-07-15 04:25:47

小弟初学JavaScript，求
javascript 实现图片的飘动，就像广告那种

...全文

287 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ldii3 2009-07-16

打赏
举报

<table border=0 width=100% height=181>

<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="http://hiphotos.baidu.com/创想个性t恤/pic/item/24a4275957bbb1fa9d8204a6.jpg" style="position:absolute;left:200;top:90" width=150 height=150>
</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>

pengrong 2009-07-16

打赏
举报

图片碰到边缘就反弹回去的那种类似广告图片的效果

pengrong 2009-07-16

打赏
举报



<script>

   function flwAd()

   {

	 var L=0;

	 var T=0;//L左边界，T上边界

	 var R=document.body.offsetWidth-document.getElementById("flw").offsetWidth;

	 var B= document.body.offsetHeight-document.getElementById("flw").offsetHeight;

	 document.getElementById("flw").style.left=x+document.body.scrollLeft; //层显示的左边距 随着滚动条而滚动

	 document.getElementById("flw").style.top=y+document.body.scrollTop; //层显示的上边距

	 x=x + step *(xin?1:-1);//判断

		 if(x<L)

		 {

		 xin=true; x=L;

		 }

		 if(x>R)

		 {

		 xin=false; x=R;

		 }

	 y=y+ step *(yin?1:-1);

		 if(y<T)

		 {

		 yin=true; y=T;

		 }

		 if(y>B)

		 {

		 yin=false; y=B;

		 } 

   }

    setInterval("flwAd()",10);//每隔10毫秒调用一次函数

   

</script>

<html>

  <body >

<!--漂浮广告  换个图片就是了-->

<DIV id="flw" style="position:absolute;z-index:3;">

<IMG src="hx.JPG" width="76" height="75">

</DIV>

</body>

</html>

feyyee 2009-07-16

打赏
举报

[Quote=引用 1 楼 cenzige 的回复:]
HTML code<script>
window.setInterval("yuJ()",50);
var i2 = "+";
var x2 = 10;
var y2 = 400;
var op = 100;
function yuJ(){
var i_y = document.getElementById("YuJ");
var v_w = document.body.clientWidth;
if(x2 > v_w-200){ i_y.style.display = "none";}
x2 = x2 + 4;
y2 = y2 - 2;
op = op - 0.5;
i_y.style.left = x2;
i_y.style.top = y2;
i_y.style.filter =…
[/Quote]

谢谢。有没有那种图片碰到边缘就反弹回去的那种类似广告图片的效果呢

岑子哥 2009-07-15

打赏
举报

我做的是一个飞机，可以飞的那种

岑子哥 2009-07-15

打赏
举报

<script>

window.setInterval("yuJ()",50);

var i2 = "+";

var x2 = 10;

var y2 = 400;

var op = 100;

function yuJ(){

	var i_y = document.getElementById("YuJ");

	var v_w = document.body.clientWidth;

	if(x2 > v_w-200){ i_y.style.display = "none";}

	x2 = x2 + 4;

	y2 = y2 - 2;

	op = op - 0.5;

	i_y.style.left = x2;

	i_y.style.top = y2;

	i_y.style.filter = "alpha(opacity="+ op +")";

}

</script>

<style>

#YuJ{ position:absolute; left:10px; top:400px; border:0px;}

</style>

<img id="YuJ" src="img/index/yujing.gif" />