js實(shí)現(xiàn)廣告漂浮效果的小例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
div{
position:absolute;
}
</style>
</head>
<body>
<div id="floatdiv">
<img src="1.jpg" height="100px" width="200px">
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
/*
利用window對(duì)象，實(shí)現(xiàn)浮動(dòng)效果
1、有一個(gè)div，就是我們要控制的，它的起始點(diǎn)坐標(biāo)（0,0）
2、設(shè)定橫向和縱向的速度
3、控制div移動(dòng)
1）div是否到達(dá)邊界，設(shè)置圖片速度反向移動(dòng)
*/
//獲取圖片所在的div對(duì)象
var img=document.getElementById("floatdiv");
//設(shè)置div起始點(diǎn)坐標(biāo)
var x=0,y=0;
//設(shè)置div行進(jìn)速度
var xSpeed=2,ySpeed=1;
//設(shè)置圖片移動(dòng)
var w=document.body.clientWidth-200,h=document.body.clientHeight-100;
function floatdiv(){
//比較圖片是否到達(dá)邊界，如查到達(dá)邊界 改變方向;如未到達(dá)邊界
if(x>w||x<0) xSpeed= -xSpeed;
if(y>h||y<0) ySpeed= -ySpeed;
x+=xSpeed;
y+=ySpeed;
//設(shè)置坐標(biāo)值，起始坐標(biāo)+速度
img.style.top=y+"px";
img.style.left=x+"px";
setTimeout("floatdiv()",10);
}
floatdiv();
</script>
相關(guān)文章
laydate如何根據(jù)開始時(shí)間或者結(jié)束時(shí)間限制范圍
這篇文章主要為大家詳細(xì)介紹了laydate根據(jù)開始時(shí)間或者結(jié)束時(shí)間限制范圍的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)值自動(dòng)增加動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
javascript動(dòng)態(tài)創(chuàng)建對(duì)象的屬性詳解
在本篇文章中我們給大家分享了關(guān)于javascript動(dòng)態(tài)創(chuàng)建對(duì)象的屬性的相關(guān)知識(shí)點(diǎn)以及代碼分享，需要的朋友們參考學(xué)習(xí)下。2018-11-11
在使用JSON格式處理數(shù)據(jù)時(shí)應(yīng)該注意的問題小結(jié)
這篇文章主要介紹了在使用JSON格式處理數(shù)據(jù)時(shí)應(yīng)該注意的問題，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05
some()方法用于檢測數(shù)組中的元素是否滿足指定條件函數(shù)提供,這篇文章主要介紹了JS中的數(shù)組的some()方法示例解析,需要的朋友可以參考下2025-04-04
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。JSON采用完全獨(dú)立于語言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成2021-11-11
JS獲取整個(gè)頁面文檔的實(shí)現(xiàn)代碼
就是在當(dāng)前頁面用AJAX請求當(dāng)前頁面，返回的就是整個(gè)頁面的HTML··既然是整個(gè)頁面，所以也包括文檔聲明2011-12-12
這篇文章主要介紹了在頁面加載之后執(zhí)行JavaScript的詳細(xì)過程，本文通過實(shí)例代碼文字解說給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)
本文分享了利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)的實(shí)例代碼。小編認(rèn)為具有很好的參考價(jià)值，感興趣的朋友可以看下2016-12-12
全屏滾動(dòng)插件fullPage.js使用實(shí)例解析
這篇文章主要為大家解析了全屏滾動(dòng)插件fullPage.js使用實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10