快捷導(dǎo)航

js 圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼

更新時(shí)間：2013年07月02日 16:31:38 作者：

這篇文章介紹了js圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼，有需要的朋友可以參考一下

//很有趣的浮動(dòng)哦，不用太多代碼，和大家分享下
<html>
<head>隨機(jī)浮動(dòng)
<style type="text/css">
#divimg{
/*
對(duì)圖片進(jìn)行絕對(duì)定位
*/
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對(duì)象
var divimg=document.getElementById("divimg");
//設(shè)置起始位置
var x=0,y=0;
//設(shè)置圖片的前進(jìn)速度
var xSpeed=8,ySpeed=2;
//設(shè)置圖片浮動(dòng)高度和寬度
var w=document.documentElement.clientWidth-205,h=document.body.clientHeight-108;
//alert(w);
function floatimg(){
//比較是否達(dá)到邊界，如果到達(dá)邊界以后就改變圖片的方向?yàn)榉聪颍绻催_(dá)到邊界則繼續(xù)向前
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>

您可能感興趣的文章:

相關(guān)文章

JS使用jsBarcode生成條形碼(一維碼)簡單實(shí)例
JsBarcode是一個(gè)用JavaScript編寫的條形碼生成器,它支持多種條形碼格式,可在瀏覽器和Node.js中使用,下面這篇文章主要給大家介紹了關(guān)于JS使用jsBarcode生成條形碼(一維碼)的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Bootstrap每天必學(xué)之彈出框（Popover）插件
Bootstrap每天必學(xué)之彈出框（Popover）插件,彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）來填充，如何實(shí)現(xiàn)請參考本文
2016-04-04
使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細(xì)介紹了使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
深入理解JS中的變量及作用域、undefined與null
本篇文章主要是對(duì)JS中的變量及作用域、undefined與null進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
js 控制圖片大小核心講解
控制圖片大小的方法有很多，在本文將為大家詳細(xì)介紹下使用js實(shí)現(xiàn)縮放圖片，核心代碼如下，感興趣的朋友可以參考下
2013-10-10
[HTML/CSS/Javascript]WWTJS
[HTML/CSS/Javascript]WWTJS...
2007-09-09
純js代碼生成可搜索選擇下拉列表的實(shí)例
下面小編就為大家分享一篇純js代碼生成可搜索選擇下拉列表的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
uniapp插件uview下表單無法動(dòng)態(tài)校驗(yàn)的問題解決
最近項(xiàng)目中用到了uview?在做表單時(shí)用到了校驗(yàn),發(fā)現(xiàn)校驗(yàn)不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動(dòng)態(tài)校驗(yàn)的問題解決,需要的朋友可以參考下
2022-12-12
JS控制按鈕10秒鐘后可用的方法
這篇文章主要介紹了JS控制按鈕10秒鐘后可用的方法,涉及JavaScript基于時(shí)間函數(shù)控制頁面元素樣式動(dòng)態(tài)變換的技巧,需要的朋友可以參考下
2015-12-12
Bootstrap Paginator分頁插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap Paginator分頁插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05