用javascript實現網站來回撞動的廣告圖片

fmms 12年前發布 | 22K 次閱讀 JavaScript開發 JavaScript

這個程序實現的效果就是一張div廣告圖片在網頁中沒撞到邊就會自動反彈，就想物理學中的光線一樣，哎呀意思差不多吧。

首先跟大家說下大概的思路：控制div的坐標起始點，將兩個坐標的值給予不同程度的增長，當圖片撞到上下左右每個邊緣的時候

將坐標X或者坐標Y的增長變為負數后繼續累加（整數累加增大，負數累加則就是減少），最后通過定時器來間隔運行。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網站來回撞動的廣告圖片</title>


<!--
1.現有一個div圖片，div就是我們控制的圖片起始點為（0，0）
2.設定橫向和縱向的速度
3.控制div的移動
 1》廣告div是否到達邊界
 2》如果到達以后，我們設置按照這個速度反向移動
-->
<style>
div{
    position:absolute;



}




</style>


</head>


<body>
<div id="divImg">
<img src="./haha.jpg" width="130" height="180">
</div>


<script language="javascript" type="text/javascript">
//獲取圖片div對象
var img1=document.getElementById("divImg");


//設置div起始點的坐標(0,0）左上角坐標
var x=0,y=0;


//設置圖片的運行的速度
var xSpeed=2,ySpeed=1;
//將有效的屏幕高度和寬度都減去div的寬和高，就是圖片運行空間
var w=window.screen.availWidth-130,h=window.screen.availHeight-180;


function floatimg(){
    //比較圖片是否到達邊界
    //如果到達邊界后，控制圖片改變方向，
    //當圖片碰到底邊緣的時候應該往上走，也就y軸達到最大值，應該縮小了（就是符合y>h這個條件），這時y的增長數xSpeed變為負數
    //當圖片碰到右邊緣的時候這時候該往左走，也就是x達到最大值，該縮小了。（就是符合x>w），這時y的增長數xSpeed變為負數
    //當圖片碰到上邊緣的時候圖片的該往往下走了，也就是y的值為零的時候，增長數再次變為負數后將增大（符合y<0）
    //當圖片碰到左邊的時候，圖片該往右走，也就是x的值為零的時候，增長數變為負數后將增大（符合x<0）
    if(x>w||x<0) xSpeed=-xSpeed;
    if(y>h||y<0) ySpeed=-ySpeed;
    //如果沒到達邊界，設置圖片的左上角的坐標
    //設置坐標值， 起始坐標+速度
    x+=xSpeed;
    y+=ySpeed;
//alert(x+","+y);
    //將每次改變后的圖片的坐標從新賦值
    img1.style.left=x+"px";
    img1.style.top=y+"px";



//js定時器：setTimeout(funhander,time)的作用是在過time毫秒后，執行一次句柄funhander指向的方法。
setTimeout("floatimg()",50);



}


floatimg();
</script>
</body>
</html></pre></span></span>
 本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！