### 無縫滾動
- 效果演示
- 物體運動基礎
- 讓 `div` 移動起來
- `offsetLeft/offsetTop` 的作用:獲取當前對象的左邊距/上邊距
- `offsetWidth/offsetHeight`
- 用定時器讓物體連續移動:
- `innerHTML` 拼接兩節圖片, 寬度后面加 `px` 才會生效
- `overflow:hidden;` 隱藏元素外的內容
- 改變滾動的方向
- 修改 `speed`
- 修改判定條件
- 多次點擊越來越快:`if (!timer) `或`clearInterval(timer);` 避免重復調用
- 鼠標移入暫停
- 移入關閉定時器
- 移出重新開啟定時器
- 代碼:
```HTML
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="../reset.css">
<title>移出延時隱藏</title>
<style>
body {
width: 560px;
margin: 0 auto;
}
#d2 {
margin: 10px;
width: 200px;
height: 200px;
background-color: rgb(0, 204, 255);
display: none;
float: left;
}
#d1 {
margin: 10px;
width: 100px;
height: 100px;
background-color: rgb(0, 255, 149);
float: left;
}
#d3 {
margin: 220px auto;
width: 560px;
height: 140px;
position: absolute;
background-color: rgb(135, 182, 182);
overflow: hidden;
}
#u1 {
position: relative;
}
#u1 li {
float: left;
}
</style>
<script>
window.onload = function () {
// 封裝 getElementById 函數
function get(id) {
return document.getElementById(id);
}
// 封裝 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 鼠標移動到 d1 上,d2 顯示,移出隱藏;
// 鼠標移到 d2 上,清除定時器,移出 d2 開啟定時器
let timer = '';
get('d1').onmouseover= get('d2').onmouseover = function () {
clearTimeout(timer);
get('d2').style.display = 'block';
}
get('d1').onmouseout= get('d2').onmouseout = function () {
timer = setTimeout(hide,1000);
}
function hide() {
get('d2').style.display = 'none';
}
// 無縫滾動
get('u1').innerHTML += get('u1').innerHTML;
get('u1').style.width = gets('li').length * gets('li')[0].offsetWidth + 'px';
let timer2 = '';
let speed = 2;
// 左移
get('btn1').onclick = function () {
speed = -2;
if (!timer2) {
timer2 = setInterval(move, 30);
}
}
// 右移
get('btn2').onclick = function () {
speed = 2;
if (!timer2) {
timer2 = setInterval(move, 30);
}
}
// 移動
function move() {
get('u1').style.left = get('u1').offsetLeft + speed + 'px';
if (get('u1').offsetLeft < -get('u1').offsetWidth/2) {
get('u1').style.left = 0;
} else if (get('u1').offsetLeft > 0){
get('u1').style.left = -get('u1').offsetWidth/2 + 'px';
}
console.log(get('u1').offsetLeft);
}
// 鼠標懸停
get('d3').onmouseover = function () {
clearInterval(timer2);
}
get('d3').onmouseout = function () {
timer2 = setInterval(move, 30);
}
}
</script>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">
<ul id="u1">
<li><img src="images/1.png" alt=""></li>
<li><img src="images/2.png" alt=""></li>
<li><img src="images/3.png" alt=""></li>
<li><img src="images/4.png" alt=""></li>
</ul>
</div>
<input type="button" name="" id="btn1" value="左移">
<input type="button" name="" id="btn2" value="右移">
</body>
</html>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一個 JS 特效:鼠標提示框
- 網頁換膚和 if 判斷
- 函數傳參
- 循環 while 和 for
- 導航欄選項卡
- JS 簡易日歷
- JavaScript 基礎
- JavaScript 組成
- 變量類型
- 變量類型轉換
- 變量的作用域和閉包
- 命名規范
- 運算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函數返回值
- 函數傳參與行間樣式
- 數組基礎操作
- 定時器的使用
- 定時器的作用
- 數碼時鐘
- Date 對象其它方法
- 延時提示框
- 無縫滾動
- DOM基礎應用
- DOM 基礎
- DOM 節點
- 操作元素屬性
- DOM 元素靈活查找
- DOM 操作應用
- 創建、插入和刪除元素
- 文檔碎片
- DOM操作應用高級
- 表格標簽
- 表格應用
- 表單應用
- JS 運動基礎
- 運動基礎
- 運動框架及應用
- 緩沖運動
- 運動的停止條件
- JS 運動應用
- 多物體運動框架
- 任意值運動框架
- 仿 Flash 圖片展示
- JS 運動中級
- 鏈式運動框架
- 完美運動框架
- 運動框架總結
- 運動框架應用
- JS事件基礎
- Event 對象和事件
- 鼠標事件
- 鍵盤事件
- JS 事件中級
- 默認事件
- 拖拽
- JS 事件高級應用
- 事件綁定
- 高級拖拽
- 自定義滾動條
- Ajax 基礎
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中級
- 編寫 Ajax
- Ajax 數據
- JS 面對對象基礎
- 面對對象是什么
- JS 中的面對對象
- 第一個面對對象的程序
- 工廠方式
- 原型:Prototype
- 面對對象編程方式
- JS 面對對象實例
- 面對對象的選項卡
- JS 面對對象高級
- Json 方式的面向對象
- 拖拽和繼承
- 使用繼承
- 系統對象
- BOM 應用
- BOM 基礎
- 尺寸及坐標
- 常用方法和事件
- COOKIE 基礎與應用
- 什么是 cookie
- 使用 cookie
- JS 中的正則表達式
- 正則表達式基礎
- 字符串與正則配合
- 字符串
- 量詞
- 常用正則例子
- JS Template 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符