本文實例講述了js實現的簡單圖片浮動效果。分享給大家供大家參考，具體如下：
利用window對象，實現一個圖片的浮動效果
1、現有一個廣告div，就是我們要控制的，它的起始點（0,0）
2、設定橫向和縱向的速度
3、控制廣告div移動
1）廣告div是否達到邊界
2）如果到達邊界后，我們設置速度反向移動
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style>div{ position:absolute;}img{ position:absolute; filter:alpha(opacity=100);/* IE */ -moz-opacity:1;/* Moz + FF */ opacity: 1;/* 支持CSS3的瀏覽器（FF 1.5也支持）*/}</style></head><body><div id="divimg"><img src="123.jpg" width="100" height="150"></div><script language="JavaScript" type="text/javascript"> //獲取圖片所在的div對象 var img=document.getElementById("divimg"); //設置div 左上角坐標 ，起始點的坐標 var x=10,y=10; //設置圖片的行進速度 var xSpeed=2,ySpeed=1; //設置圖片的最大浮動的高度和寬度 var w=document.documentElement.clientWidth-110,h=document.documentElement.clientHeight-160; 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"; img.style.left=x+"px"; //延遲調用函數floatimg()，每個40毫秒調用一次 setTimeout("floatimg()",40); } floatimg();</script></body></html>更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
