JS實現的DIV塊來回滾動效果示例
更新時間：2017年02月07日 11:44:33 作者：風起從容
這篇文章主要介紹了JS實現的DIV塊來回滾動效果,結合實例形式分析了JS通過時間函數定時觸發(fā)動態(tài)改變頁面元素樣式的相關操作技巧,需要的朋友可以參考下
本文實例講述了JS實現的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;//開關,true開,false關
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>
運行效果圖如下：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要介紹了詳解uniapp的全局變量實現方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要為大家詳細介紹了原生Javascript實現五角星評分，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了javascript實現固定側邊欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細介紹了js實現純前端壓縮圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。被 JavaScript 驗證的這些典型的表單數據有：用戶是否已填寫表單中的必填項目？用戶輸入的郵件地址是否合法？用戶是否已輸入合法的日期？用戶是否在數據域 (numeric field) 中輸入了文本？2014-09-09
js 面向對象知識是最基礎的入門知識點，下面通過本文實例代碼給大家詳細介紹js 面向對象的知識，感興趣的朋友一起學習吧2017-09-09
用media="print"的css來控制要打印的文件，media為print的樣式，表示打印時該樣式才起作用，下面為大家詳細介紹下，感興趣的朋友不要錯過2014-01-01
這篇文章主要介紹了js實現頂部可折疊的菜單工具欄效果,可實現鼠標滑過菜單工具欄出現折疊與展開效果,涉及javascript鼠標事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了javascript實現移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
函數式JavaScript編程指南...2007-02-02