DOM案例—-實現漂浮廣告 超簡單 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

廢話不多說,直接貼代碼,帶註釋,可以用作任何地方,方便,開源,有不懂的地方請留言。。
 
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮動的圖片</title>
<style>
 p{
  position:absolute;
  }
</style>
</head>
<body>
<p id="img">
<img src="d:\1.jpg" height="100px" width="100px"/>
</p>
<script language="javascript" type="text/javascript">
  //獲取p中圖片的對象
 var img=document.getElementById("img");
  //設置p左上角坐標 起始坐標
 var x=0,y=0;
 //設置圖片行進的速度
 var xSpeed=12,ySpeed=5;
 //設置圖片的最大浮動的高度和寬度
 var w=document.documentElement.clientWidth-100,h=document.documentElement.clientHeight-120;
 
 function floatimg(){
 
  //比較圖片是否到達邊界
  //如果到達邊界以後,我控制圖片改變方向
  if(x>w || x<0)  xSpeed = -xSpeed;
  if(y>h || y<0)  ySpeed = -ySpeed;
  //如果沒有到達邊界,設置圖片的左上角的坐標
    x+=xSpeed;
    y+=ySpeed;
  //設置坐標值 起始坐標+速度
   img.style.top=y+"px";
  // alert(img.style.top);
   img.style.left=x+"px";
 
  setTimeout("floatimg()",40);
 }
 
floatimg();
</script>
</body>
</html>

摘自 劉海闖的專欄

發佈留言