javascript 廣告移動特效的實現(xiàn)代碼
更新時間：2016年06月25日 09:00:46 投稿：jingxian
下面小編就為大家?guī)硪黄猨avascript 廣告移動特效的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box2{}
.box2{width: 200px; height: 200px; background: red; border-radius: 50%;position: relative;}
.box3{width: 800px; height: 500px; border:1px solid red;}
</style>
</head>
<body>
<button type="" id="start">開始</button>
<button type="" id="stop">停止</button>
<div class="box3">
<div id="box" class="box2">
</div>
</div>
</body>
<script type="text/javascript">
var lr=600;
var tb=300;
var i=0;
var j=0;
var box=document.getElementById('box');
var start=document.getElementById('start');
var stop=document.getElementById('stop');
start.onclick=function(){
start.style.display='none';
stop.style.display='inline';
var time=setInterval(function(){
box.style.left=i+'px';
box.style.top=j+'px';
if (i>lr) {
lr=0;
i--;
}
if(i<=lr){
lr=600;
i++;
}
if (j>tb) {
tb=0;
j--;
}
if (j<=tb) {
tb=300;
j++
}
stop.onclick=function(){
clearInterval(time);
stop.style.display='none';
start.style.display='inline';
}
},5);
}
</script>
</html>
以上就是小編為大家?guī)淼膉avascript 廣告移動特效的實現(xiàn)代碼全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
前幾天用jquery做了一個JS的圖片輪播效果，現(xiàn)在用原生的javascript代碼實現(xiàn)同樣的功能，當(dāng)練習(xí)用吧，代碼寫得不是很滿意。2010-09-09
JavaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)
下面小編就為大家?guī)硪黄狫avaScript數(shù)據(jù)操作_淺談原始值和引用值的操作本質(zhì)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js根據(jù)鼠標(biāo)移動速度背景圖片自動旋轉(zhuǎn)的方法
這篇文章主要介紹了js根據(jù)鼠標(biāo)移動速度背景圖片自動旋轉(zhuǎn)的方法,實例分析了javascript操作鼠標(biāo)與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
瀑布流的實現(xiàn)方式（原生js+jquery+css3）
這篇文章主要為大家詳細(xì)介紹了原生js+jquery+css3實現(xiàn)瀑布流的相關(guān)代碼，三種實現(xiàn)瀑布流的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
5秒后跳轉(zhuǎn)效果(setInterval/SetTimeOut)
實現(xiàn)5秒后自動跳轉(zhuǎn)效果有兩種方式setInterval與SetTimeOut，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-05-05
js 面向?qū)ο笾R是最基礎(chǔ)的入門知識點，下面通過本文實例代碼給大家詳細(xì)介紹js 面向?qū)ο蟮闹R，感興趣的朋友一起學(xué)習(xí)吧2017-09-09
詳解JavaScript中typeof與instanceof用法
typeof用以獲取一個變量或者表達(dá)式的類型而instanceof用于判斷一個變量是否某個對象的實例，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
ES6新增的math,Number方法,小編覺得非常不錯，需要的朋友參考下吧2017-08-08
JavaScript基本語法_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript基本語法，適合剛?cè)腴T的同學(xué)，有興趣的可以了解下。2017-06-06
這篇文章主要是對Javascript變量作用域進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12