JS實(shí)現(xiàn)的DIV塊來回滾動(dòng)效果示例
更新時(shí)間：2017年02月07日 11:44:33 作者：風(fēng)起從容
這篇文章主要介紹了JS實(shí)現(xiàn)的DIV塊來回滾動(dòng)效果,結(jié)合實(shí)例形式分析了JS通過時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的DIV塊來回滾動(dòng)效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="xx" style=" position:relative;left:100px;width:100px;height:50px;border: solid 1px red;">腳本之家</div>
<script type="text/javascript">
function ls(){
var p=true;//開關(guān),true開,false關(guān)
var xx=document.getElementById('xx');
var xxleft = parseInt(xx.style.left);
var speed = 20;
var t=setInterval(rollRight,speed);
//向左移動(dòng)
function rollLeft(){
if(p){
xxleft--;
xx.style.left = xxleft+'px';
if(xxleft <=0 ){
clearInterval(t);
t=setInterval(rollRight,speed);
}
}
}
//向右移動(dòng)
function rollRight(){
if(p){
xxleft++;
xx.style.left = xxleft+'px';
if(xxleft >= 300){
clearInterval(t);
t=setInterval(rollLeft,speed);
}
}
}
}
ls();
</script>
</body>
</html>
運(yùn)行效果圖如下：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了Taro集成Redux快速上手的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
OpenLayers實(shí)現(xiàn)點(diǎn)要素圖層的聚合顯示的方法
在很多情況下，點(diǎn)要素圖層中的要素?cái)?shù)量可能會(huì)成百上千，如果一個(gè)點(diǎn)要素圖層中的點(diǎn)數(shù)量很多，我們就會(huì)采取圖層聚合的方式對(duì)其進(jìn)行處理，本文就來介紹一下，感興趣的可以了解一下2021-09-09
有時(shí)候我們需要數(shù)組元素的值，那么就可以參考下面的方法，文中提到了不少這方面的資料，數(shù)組去重功能等2013-03-03
這篇文章主要介紹了JS匿名函數(shù),結(jié)合實(shí)例形式分析了javascript匿名函數(shù)的定義、參數(shù)、返回值等相關(guān)使用方法,需要的朋友可以參考下2016-11-11
JavaScript如何刪除對(duì)象的某個(gè)屬性詳析
這篇文章主要給大家介紹了關(guān)于JavaScript如何刪除對(duì)象的某個(gè)屬性的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
JavaScript 是弱類型, 變量可存儲(chǔ)任意類型, 并且運(yùn)行期間類型可變2011-05-05
JavaScript和ActionScript的交互實(shí)現(xiàn)代碼
JavaScript和ActionScript的交互實(shí)現(xiàn)代碼，需要js與flash交互的朋友可以學(xué)習(xí)下。2010-08-08
js結(jié)合正則實(shí)現(xiàn)國(guó)內(nèi)手機(jī)號(hào)段校驗(yàn)
這篇文章主要介紹了js結(jié)合正則實(shí)現(xiàn)國(guó)內(nèi)手機(jī)號(hào)段校驗(yàn)的方法以及使用js和jQuery實(shí)現(xiàn)的簡(jiǎn)單校驗(yàn)手機(jī)號(hào)的示例，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-06-06
下面小編就為大家?guī)硪黄狫S非空驗(yàn)證及郵箱驗(yàn)證的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
javascript表單驗(yàn)證使用示例(javascript驗(yàn)證郵箱)
JavaScript可用來在數(shù)據(jù)被送往服務(wù)器前對(duì)HTML表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證2014-01-01