<div class="codetitle"> <span><a style="CURSOR: pointer" data="94268" class="copybut" id="copybut94268" onclick="doCopy('code94268')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code94268"> <br><br><br><br><meta http-equiv="Content-Type " content="text/html; charset=UTF-8"> <br><title>浮動圖片</title> <br><script type="text/javascript"><BR>var step = 1; //移動的像素<BR>var y = -1; // 垂直移動的方向，-1表示向上，1表示向下<BR>var x = 1; // 水平移動的方向，-1表示向左，1表示向右<BR>function myFloat()<BR>{<BR>var img = document.getElementById("myImg");<BR>// 取得圖片和目前瀏覽器視窗上邊距，由於img.style.top取得的值帶px單位<BR>var top = img.style.top.replace("px", "");<BR>// top = top - 100;<BR>// img.style.top = top "px";<BR>// 取得圖片與目前瀏覽器視窗左邊距<BR>var left = img.style.left.replace("px", "");<BR>// left = left - 100;<BR>// img.style.left = left "px";<BR>// 上下移動<BR>if(top <= 0)<BR>{<BR>y = 1;<BR>} <BR>if(top >= document.body.clientHeight)<BR>{<BR>y = -1;<BR>}<BR>top = (top*1) (step * y);<BR>img .style.top = top "px";<BR>// 左右移動<BR>if(left <= 0)<BR>{<BR>x = 1;<BR>}<BR>// alert(img .clientWidth);<BR>if(left >= (document.body.clientWidth - img.clientWidth))<BR>{<BR>x = -1;<BR>}<BR>left = (left*1) (step * x);<BR>img.style.left = left "px";<BR>setTimeout("myFloat()", 20);<BR>}<BR></script><br> head><br><br><img id="myImg" src="http://files.jb51.net/file_images/article%20/201307/2013071009420928.png" alt="js浮動圖片的動態效果_javascript技巧" > style="max-width:90%" /><br><br>另一種的實作方式<br> </div> <br><br><div class="codetitle">複製程式碼<span><a style="CURSOR: pointer" data="85982" class="copybut" id="copybut85982" onclick="doCopy('code85982')"><u> 程式碼如下:</u><div class="codebody" id="code85982"> <br><br><br><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <br>< ;title>娴</div></a></span> </div>
style="max-width:90%" />