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