快捷導(dǎo)航

JavaScript代碼實(shí)現(xiàn)左右上下自動(dòng)晃動(dòng)自動(dòng)移動(dòng)

更新時(shí)間：2016年04月08日 09:03:04 作者：阿訊小飛

最近幾天做了一個(gè)項(xiàng)目，原來(lái)是用css3動(dòng)畫(huà)做的，由于不兼容IE，改成用js做了，特此分享給大家，供大家參考

最近幾天做了一個(gè)項(xiàng)目，原來(lái)是用css3動(dòng)畫(huà)做的，由于不兼容IE，改成用js做了，特此分享給大家，供大家參考，代碼有bug歡迎提出，寫(xiě)的不好還請(qǐng)見(jiàn)諒!

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>float left and top</title>
<style type="text/css">
.w1000{position:relative;width:1000px;margin:0 auto;}
.positionpub{position:absolute;}
.positionpub p{width:50px;height:50px;background:#333;color:#fff;line-height:50px;text-align:center;position:absolute;}
.ad_Float{top:50px;left:50px;}
.ad_Float1{top:150px;left:250px;}
.ad_Float2{top:250px;left:450px;}
</style>
</head>
<body>
<div class="w1000">
<div class="ad_Float positionpub">
<p id="ad_Float">left</p>
</div>
<div class="ad_Float1 positionpub">
<p id="ad_Float1">right</p>
</div>
<div class="ad_Float2 positionpub">
<p id="ad_Float2">down</p>
</div>
</div>
<script type="text/javascript">
var x = 0, y = 0 , x1 = 0;
var xin = true, yin = true;
var step = 1,step2 = 2;
var delay = 10;
var obj = document.getElementById("ad_Float");
var obj1 = document.getElementById("ad_Float1");
var obj2 = document.getElementById("ad_Float2");
function ad_Float() {
var L = 0;
var R = 100;
obj.style.left = x + document.documentElement.scrollLeft + "px";
x = x + step * (xin ? 1 : -1);
if (x < L) {
xin = true;
x = L;
}
if (x > R) {
xin = false;
x = R;
}
};
function ad_Float1() {
var L1 = 0;
var R1 = 100;
obj1.style.left = x1 + document.documentElement.scrollLeft + "px";
x1 = x1 + step * (xin ? 1 : -1);
if (x1 < L1) {
xin = true;
x1 = L1;
}
if (x1 > R1) {
xin = false;
x1 = R1;
}
};
function ad_Float2() {
var T = 0;
var B = 150;
obj2.style.top = y + document.documentElement.scrollTop + "px";
y = y + step2 * (yin ? 1 : -1);
if (y < T) {
yin = true;
y = T;
}
if (y > B) {
yin = false;
y = B;
}
};
var itl = setInterval("ad_Float()", delay);
var itl1 = setInterval("ad_Float1()", delay);
var itl2 = setInterval("ad_Float2()", delay);
</script>
</body>
</html>

代碼到此結(jié)束了，希望對(duì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)帶動(dòng)畫(huà)的回到頂部效果
這篇文章主要為大家詳細(xì) 介紹了JS實(shí)現(xiàn)帶動(dòng)畫(huà)的回到頂部效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
javascript如何刪除所有事件監(jiān)聽(tīng)器
這篇文章主要介紹了javascript 刪除所有事件監(jiān)聽(tīng)器,文中還通過(guò)示例代碼介紹了javaScript刪除對(duì)象屬性總結(jié)方法，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-06-06
JS原型、原型鏈深入理解
這篇文章主要針對(duì)javascript中的原型、原型鏈深入理解，原型是JavaScript中一個(gè)比較難理解的概念，本文為大家解決這個(gè)難題，感興趣的小伙伴們可以參考一下
2016-02-02
修復(fù)ie8&chrome下window的resize事件多次執(zhí)行
window.onresize 事件專用事件綁定器 v0.1,用于解決 lte ie8 & chrome 及其他可能會(huì)出現(xiàn)的原生 window.resize 事件多次執(zhí)行的 BUG.
2011-10-10
JS獲取并處理php數(shù)組的方法實(shí)例分析
這篇文章主要介紹了JS獲取并處理php數(shù)組的方法,結(jié)合實(shí)例形式分析了php針對(duì)數(shù)組的創(chuàng)建、轉(zhuǎn)換以及js處理數(shù)組的接收、遍歷、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下
2018-09-09
JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文大家能夠掌握三種定義函數(shù)的方法，需要的朋友可以參考下
2017-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡切換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡切換的相關(guān)資料,需要的朋友可以參考下
2016-01-01
Javascript在IE和FireFox中的不同表現(xiàn)簡(jiǎn)析
本文將詳細(xì)介紹Javascript在IE和FireFox中的不同表現(xiàn)，本人整理了一下，需要的朋友可以參考下
2012-12-12
JS庫(kù)之ParticlesJS使用簡(jiǎn)介
ParticlesJS是一個(gè)輕量級(jí)的創(chuàng)建粒子背景的 JavaScript 庫(kù)，接下來(lái)通過(guò)本文給大家分享JS庫(kù)之ParticlesJS使用簡(jiǎn)介，感興趣的朋友一起看看吧
2017-09-09
利用JS判斷用戶是否上網(wǎng)(連接網(wǎng)絡(luò))
本篇文章主要介紹了利用JS判斷用戶是否上網(wǎng)(連接網(wǎng)絡(luò))。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12