DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js 圖片隨機不定向浮動的實現代碼
js 圖片隨機不定向浮動的實現代碼
編輯:關於JavaScript      日期:2016/12/24 9:41:02
復制代碼 代碼如下:
//很有趣的浮動哦,不用太多代碼,和大家分享下
<html>
<head>隨機浮動
<style type="text/css">
#divimg{
/*
對圖片進行絕對定位
*/
position:absolute;
}
</style>
</head>
<body>
<div id="divimg">
<img src="../../resource/images/float.jpg" width="205" height="108">
</div>
<script language="javascript" type="text/javascript">
//獲取圖片的所有div對象
var divimg=document.getElementById("divimg");
//設置起始位置
var x=0,y=0;
//設置圖片的前進速度
var xSpeed=8,ySpeed=2;
//設置圖片浮動高度和寬度
var w=document.documentElement.clientWidth-205,h=document.body.clientHeight-108;
//alert(w);
function floatimg(){
//比較是否達到邊界,如果到達邊界以後就改變圖片的方向為反向,如果未達到邊界則繼續向前
if(x<0||x>w) xSpeed=-xSpeed;
if(y<0||y>h) ySpeed=-ySpeed;
x+=xSpeed;
y+=ySpeed;
setTimeout("floatimg()",1000);
var n=divimg.style.top=Math.round(Math.random()*h)+"px";
var m=divimg.style.left=Math.round(Math.random()*w)+"px";
}
floatimg();
</script>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved