### 运动框架应用
- 运动框架应用
- 例子：幻灯片
- 例子：新浪微博
- 链式运动
- 笔记：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 模板引擎
- 特性
- 语法
- 实例
- 表达式和运算符分类
- 主要表达式
- 左表达式
- 自增和自减
- 一元运算符
- 算术运算符
- 关系运算符
- 相等运算符
- 位移运算符
- 二进制位运算符
- 二元逻辑运算符
- 条件(三元)运算符
- 赋值运算符