### 運動框架應用
- 運動框架應用
- 例子：幻燈片
- 例子：新浪微博
- 鏈式運動
- 筆記：CSS `white-space` 屬性 保留換行
```
值 描述
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合并空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
```
- 代碼：
```HTML
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>幻燈片上下滑動和新浪微博效果</title>
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="./css/18.1.css">
<script src="./lib/move2.js"></script>
<script>
window.onload = function () {
// 封裝 getElementById
function get(id) {
return document.getElementById(id);
}
// 封裝 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 封裝 getByClassName 方法
function getByClassName(oParent, sClass) {
var aResult = new Array();
var aEle = document.getElementsByTagName('*');
for (var i in aEle) {
if (aEle[i].className === sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
// 左右箭頭切換圖片
// 獲取箭頭所在 ul
var oDiv_position = get('div_position');
var ul_btn = getByClassName(oDiv_position[1], 'ul_btn')[0];
// 獲取 li
var li_btn_left = getByClassName(ul_btn, 'slider_btn_left')[0];
var li_btn_right = getByClassName(ul_btn, 'slider_btn_right')[0];
// 獲取 img
var left_icon = getByClassName(li_btn_left, 'left_icon')[0];
var right_icon = getByClassName(li_btn_right, 'right_icon')[0];
// 鼠標移入/移出 顯示/隱藏
li_btn_left.onmouseover = left_icon.onmouseover = function () {
startMove(left_icon, {'opacity': 30});
}
li_btn_left.onmouseout = left_icon.onmouseout = function () {
startMove(left_icon, {'opacity': 0});
}
li_btn_right.onmouseover = right_icon.onmouseover = function () {
startMove(right_icon, {'opacity': 30});
}
li_btn_right.onmouseout = right_icon.onmouseout = function () {
startMove(right_icon, {'opacity': 0});
}
// 獲取大圖 class li
var ul_pic = getByClassName(oDiv_position[1], 'ul_pic')[0];
var oli_pic = getByClassName(ul_pic, 'li_pic');
var oImg = gets('img');
// 獲取縮略圖 class li
var div_thumbnail = get('div_thumbnail');
var ul_thumbnail = getByClassName(div_thumbnail, 'ul_thumbnail')[0];
var oli_thumnali = getByClassName(ul_thumbnail, 'li_thumnali');
var pic_index = 0;
var index = 0;
var z = 1;
// 縮略圖鼠標移入高亮，移出恢復,并注冊index 綁定大圖
for (var i in oli_thumnali) {
oli_thumnali[i].index = i;
oli_pic[i].index = i;
// 鼠標移入
oli_thumnali[i].onmouseover = function () {
startMove(this, {'opacity': 100});
}
// 鼠標移出 如果是當前顯示則不執行
oli_thumnali[i].onmouseout= function () {
if (oli_pic[this.index].style.zIndex != z) {
startMove(this, {'opacity': 50});
}
}
// 點擊小圖片顯示大圖
oli_thumnali[i].onclick = function () {
console.log(pic_index,parseInt(this.index))
// 如果點擊 this.index > 2 && this.index - pic_index > 0 則向右移
if (parseInt(this.index) > 2 && this.index - pic_index >0) {
pic_index = parseInt(this.index);
// 下一張會 ++ 先--
pic_index--;
right_icon.onclick();
} // 如果 this.index > 0 && this.index - pic_index < 0 則向左移
else if (this.index > 0 && this.index - pic_index < 0) {
pic_index = parseInt(this.index);
// 下一張會 -- 先++
pic_index++;
left_icon.onclick();
} else {
pic_index = parseInt(this.index);
tab();
}
}
// 讓第一個圖片顯示
if (oli_pic[i].style.zIndex == z) {
startMove(oli_thumnali[i], {'opacity': 100});
}
}
// 鼠標點擊按鈕 上一張/下一張
var slide = ''; // 滑動方向
left_icon.onclick = function () {
// 是否 <0
if (0 <= pic_index - 1) {
// console.log('1~length-1:',pic_index)
pic_index--;
if (0 < pic_index && pic_index <= oli_thumnali.length - 1) {
// 1~length-1
startMove(ul_thumbnail, {'marginLeft': -(pic_index-1)*li_thumbnali_width});
// 向右滑動特效
slide = 'right';
tab();
} else {
// 0
slide = 'right';
tab();
}
} else {
// <0 重置pic_index循環播放
// console.log('0:',pic_index)
pic_index = oli_thumnali.length - 1;
startMove(ul_thumbnail, {'marginLeft': -(pic_index-2)*li_thumbnali_width});
tab();
}
}
right_icon.onclick = function () {
// 判斷下一張是否大于總數
if (pic_index + 1 < oli_thumnali.length) {
pic_index++;
// console.log('1~oli_thumnali.length-1：',pic_index);
if (2 < pic_index && pic_index <= oli_thumnali.length - 1) {
startMove(ul_thumbnail, {'marginLeft': -(pic_index-2)*li_thumbnali_width});
// 向左滑動特效
slide = 'left';
tab();
} else {
slide = 'left';
tab();
}
} else {
// 大于 oli_thumnali.length-1 跳到第一張
pic_index = 0;
startMove(ul_thumbnail, {'marginLeft': pic_index*li_thumbnali_width});
tab();
}
}
function tab() {
// 判斷是否是當前顯示圖片
if (oli_pic[pic_index].style.zIndex != z) {
// 全部圖片半透明
for (var j in oli_thumnali) {
startMove(oli_thumnali[j], {'opacity': 50});
}
// 顯示當前點擊圖片
startMove(oli_thumnali[pic_index], {'opacity': 100});
// 顯示當前index對應大圖
oli_pic[pic_index].style.zIndex = ++z;
// 顯示文字的按鈕
ul_btn.style.zIndex = ul_txt.style.zIndex = z;
// 隱藏大圖 再用動畫顯示
// oImg[pic_index].style.height = 0;
// oli_pic[pic_index].style.top = '-360px';
// oImg[pic_index].style.width = '0px';
// startMove(oImg[pic_index],{"width": 640, "height": 360});
if (slide === 'left') {
oli_pic[pic_index].style.left = '640px';
startMove(oli_pic[pic_index],{"left": 0});
// 判斷還有沒有下一張 兩張拼接
if (pic_index-1 > 0 && pic_index+1 < oli_pic.length)
startMove(oli_pic[pic_index-1],{"left": -640});
} else if (slide === 'right') {
oli_pic[pic_index].style.left = '-640px';
startMove(oli_pic[pic_index],{"left": 0});
// 判斷還有沒有下一張 兩張拼接
if (pic_index+1 < oli_pic.length) {
startMove(oli_pic[pic_index+1],{"left": 640});
}
} else {
oImg[pic_index].style.height = '0px';
startMove(oImg[pic_index],{"height": 360});
}
// 顯示當前圖片介紹
introduction.innerHTML = arr[pic_index];
sum_num.innerHTML = parseInt(pic_index) + 1 + '/' + oli_thumnali.length;
}
}
// 自動播放
oDiv_position.timer = setInterval(right_icon.onclick, 2000);
oDiv_position.onmouseover = function () {
clearInterval(oDiv_position.timer);
}
oDiv_position.onmouseout = function () {
clearInterval(oDiv_position.timer);
oDiv_position.timer = setInterval(right_icon.onclick, 2000);
}
// 設置 ul_thumbnail 的寬度
var li_thumbnali_width = oli_thumnali[0].offsetWidth;
ul_thumbnail.style.width = oli_thumnali.length * oli_thumnali[0].offsetWidth + 'px';
// 設置文字說明
var arr = new Array('雪山','峽谷','懸崖','巖壁','海岸','雪覆蓋的懸崖','雪山','峽谷','懸崖','巖壁','海岸','雪覆蓋的懸崖');
// 獲取文字說明 li
var ul_txt = getByClassName(oDiv_position[1], 'ul_txt')[0];
var introduction = getByClassName(ul_txt, 'introduction')[0];
var sum_num = getByClassName(ul_txt, 'sum_num')[0];
sum_num.innerHTML = pic_index + 1 + '/' + oli_thumnali.length;
introduction.innerHTML = arr[pic_index];
// 新浪微博新微博效果 評論區
var div_com_show = get('div_com_show');
var text_comment = get('text_comment');
var btn_comment = get('btn_comment');
btn_comment.onclick = function () {
// 1.創建子節點 2.文字添加到子節點 3.設置樣式
// 4.渲染子節點 5.設置透明度并獲取高度 6.鏈式動畫
var oLi = document.createElement('li');
oLi.innerHTML = text_comment.value;
oLi.className = 'li_comment';
text_comment.value = '';
if (div_com_show.children.length > 0) {
div_com_show.insertBefore(oLi, div_com_show.children[0]);
} else {
div_com_show.appendChild(oLi);
}
// var iHeight = parseInt(oLi.offsetHeight) - 20; // 多算了padding
var iHeight = parseInt(getStyle(oLi, 'height'));
div_com_show.children[0].style.height = '0';
startMove(oLi,{"height": iHeight}, function fn() {
startMove(oLi,{"opacity":100});
})
}
}
</script>
<body>
<div id="div_center">
<div id="div_position">
<div id="div_pic">
<ul class="ul_pic">
<li class="li_pic" style="z-index:1"><img src="./images/album/1.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/3.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/4.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/5.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/6.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_pic"><img src="./images/album/5.jpeg" alt=""></li>
</ul>
</div>
<ul class="ul_btn" style="z-index:1">
<li class="slider_btn_left"><img class="left_icon" src="./images/images/slider_btn_icon_left.png" alt=""></li>
<li class="slider_btn_right"><img class="right_icon" src="./images/images/slider_btn_icon_right.png" alt=""></li>
</ul>
<ul class="ul_txt" style="z-index:1">
<li class="li4_background"></li>
<li class="li4_introduction">圖片說明：<span class="introduction">introduction</span></li>
<li class="li4_sum_num">圖片位置：<span class="sum_num"></span></li>
</ul>
<div id="div_thumbnail">
<ul class="ul_thumbnail">
<li class="li_thumnali"><img src="./images/album/1.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/3.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/4.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/5.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/6.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/2.jpeg" alt=""></li>
<li class="li_thumnali"><img src="./images/album/5.jpeg" alt=""></li>
</ul>
</div>
<div id="div_comments">
<div id="div_com_inp">
<textarea class="text" name="" id="text_comment" cols="60" rows="5"></textarea>
<input class="btn" type="button" name="" id="btn_comment" value="發表評論">
</div>
<div id="div_com_show">
</div>
</div>
</div>
</div>
</body>
</html>
```
- ```css
/* 18.1.css */
body {
width: 100%;
height: 100%;
background-color: cornsilk;
}
li {
float: left;
}
/* 居中 div */
#div_center {
margin: 20px auto;
width: 640px;
height: 450px;
}
/* 定位 div */
#div_position {
width: 640px;
height: 1100px;
overflow: hidden;
background-color: rgb(70, 70, 70);
position: absolute;
}
/* 大圖樣式 */
#div_pic {
width: 640px;
height: 360px;
overflow: hidden;
position: absolute;
}
.ul_pic {
position: absolute;
}
.li_pic {
position: absolute;
}
.li_pic img{
width: 640px;
height: 360px;
}
/* 左右鍵樣式 */
.ul_btn {
top: 0px;
width: 640px;
height: 360px;
position: absolute;
float: left;
}
.slider_btn_left, .slider_btn_right {
width: 150px;
height: 360px;
}
.slider_btn_right {
float: right;
}
.slider_btn_left img{
padding: 150px 105px 150px 10px ;
position: relative;
width: 35px;
height: 60px;
opacity: 0;
filter: alpha(opacity=0);
float: left;
}
.slider_btn_right img{
padding: 150px 10px 150px 105px ;
position: relative;
width: 35px;
height: 60px;
opacity: 0;
filter: alpha(opacity=0);
float: right;
}
/* 小圖樣式 */
#div_thumbnail {
top: 360px;
width: 620px;
background-color: rgb(70, 70, 70);
margin: 0 10px 0 5px;
overflow: hidden;
position: absolute;
}
.ul_thumbnail {
width: 640px;
height: 90px;
}
.li_thumnali {
opacity: 0.5;
filter: alpha(opacity=50);
}
.li_thumnali img{
padding: 10px 0px 10px 10px;
width: 125px;
height: 70px;
}
/* 圖片文字欄 */
.ul_txt {
width: 640px;
height: 20px;
position: absolute;
top: 340px;
}
.li4_background {
width: 640px;
height: 20px;
top: 0px;
background-color: rgb(0, 0, 0);
opacity: 0.5;
filter: alpha(opacity=50);
}
.li4_introduction {
top: -17px;
margin-left: 10px;
width: 500px;
position: relative;
color: rgb(255, 255, 255);
filter: alpha(opacity=80);
opacity: 0.8;
}
.li4_sum_num {
width: 120px;
top: -17px;
left: 10px;
position: relative;
color: rgb(255, 255, 255);
filter: alpha(opacity=80);
opacity: 0.8;
}
/* 評論區 */
#div_comments {
position: absolute;
display: block;
top: 450px;
padding-top: 20px;
width: 640px;
background-color: rgb(252, 229, 200);
}
#div_com_inp {
margin-top: 5px;
border-top: burlywood dashed 1px;
border-bottom: burlywood dashed 1px;
}
.text {
margin: 20px 0 20px 53px;
}
.btn {
margin: 20px 0 20px 20px;
width: 70px;
height: 70px;
}
#div_com_show {
height: 475px;
margin: 20px 50px;
padding: 0px 20px;
background-color: rgb(255, 255, 255);
overflow: hidden;
}
.li_comment {
white-space: pre-wrap;
padding: 10px 5px;
float: none;
border-bottom: cadetblue dashed 1px;
opacity: 0;
filter: alpha(opacity=0);
overflow: hidden;
}
```
- 前言
- 初探 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 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符