2012-2-22 js多图片自动移动和文字走马灯

最新推荐文章于 2023-03-01 19:37:31 发布

lvzk555

最新推荐文章于 2023-03-01 19:37:31 发布

阅读量753

点赞数

文章标签： javascript function filter 浏览器文档 css

本文链接：https://blog.csdn.net/lvzk555/article/details/7284680

版权

多图片自动移动

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

img {
position:absolute;
filter:alpha(opacity=100);/* IE */
-moz-opacity:1;/* Moz + FF */
opacity: 1;/* 支持CSS3的浏览器（FF 1.5也支持）*/
}

</style>
</head>
<body>
<div id="img">
<img src="460.gif" height="100px" width="100px"/>
</div>
<div id="img">
<img src="460.gif" height="100px" width="100px"/>
</div>
<div id="img">
<img src="460.gif" height="100px" width="100px"/>
</div>
<div id="img">
<img src="460.gif" height="100px" width="100px"/>
</div>
<div id="img">
<img src="460.gif" height="100px" width="100px"/>
</div>
<div id="img">
<img src="460.gif" height="100px" width="100px"/>
</div>

-----
<script language="javascript" type="text/javascript">

var imgs = document.images;
var x=new Array();
var y=new Array();
var xSpeed=new Array();
var ySpeed=new Array();
var w=document.documentElement.clientWidth-100,h=document.documentElement.clientHeight-100;

for(var i=0;i<imgs.length;i++){
xSpeed[i] = 3; ySpeed[i] = 3;
x[i] = i*20; y[i] = i*20;}
function floatimg(){
//alert(i);
  //比较图片是否到达边界
  //如果到达边界以后，我控制图片改变方向
  for(i=0;i<imgs.length;i++){
  if(x[i]>w || x[i]<0) xSpeed[i] = -xSpeed[i];
  if(y[i]>h || y[i]<0) ySpeed[i] = -ySpeed[i];
  //如果没有到达边界，设置图片的左上角的坐标
    x[i]+=xSpeed[i];
    y[i]+=ySpeed[i];
  //设置坐标值起始坐标+速度
   imgs[i].style.top=y[i]+"px";
  // alert(img.style.top);
   imgs[i].style.left=x[i]+"px";
}

setTimeout("floatimg()",30);
}
floatimg();
</script>
</body>