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)改變頁面元素樣式的相關(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)文章
這篇文章主要介紹了詳解uniapp的全局變量實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
原生Javascript實(shí)現(xiàn)五角星評(píng)分
這篇文章主要為大家詳細(xì)介紹了原生Javascript實(shí)現(xiàn)五角星評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
javascript實(shí)現(xiàn)固定側(cè)邊欄
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)固定側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)純前端壓縮圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Javascript表單驗(yàn)證要注意的事項(xiàng)
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有：用戶是否已填寫表單中的必填項(xiàng)目？用戶輸入的郵件地址是否合法？用戶是否已輸入合法的日期？用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本？2014-09-09
js 面向?qū)ο笾R(shí)是最基礎(chǔ)的入門知識(shí)點(diǎn)，下面通過本文實(shí)例代碼給大家詳細(xì)介紹js 面向?qū)ο蟮闹R(shí)，感興趣的朋友一起學(xué)習(xí)吧2017-09-09
用media="print"的css來控制要打印的文件，media為print的樣式，表示打印時(shí)該樣式才起作用，下面為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過2014-01-01
js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單工具欄出現(xiàn)折疊與展開效果,涉及javascript鼠標(biāo)事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05
javascript實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
函數(shù)式JavaScript編程指南...2007-02-02