Web前端基础(14)JS实践案例--旋转木马效果

Demo演示效果

html布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrap" id="wrap">
<p class="headp"><a href="http://dp2px.com"><span id="headlink">旋转木马轮播效果</span></a></p>
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>

css样式很简单,让li绝对定位处于容器的中间,然后通过javascript动态设置位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}

初始化样式

首先初始化css样式,因为不同的浏览器对有些标签的默认值是不同的,所以通常我们都会通过初始化代码来清除默认样式。

1
2
3
4
5
6
7
8
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

前面我们都是写成下面这样的,为什么不这样写,这样写有什么问题呢?

1
*{margin:0; padding:0}

如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

雅虎初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

腾讯官网初始化代码

1
2
3
4
5
6
7
8
9
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

新浪官网初始化代码

1
2
3
4
5
6
7
8
9
10
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}

ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝官网初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

网易官网初始化代码

1
2
3
4
5
6
7
8
9
html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

JS代码分析

初始化图片位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//  存储了每个图片的信息
var json = [
{ // 1
width:400,
top:20,
left:50,
opacity:20,
z:2
},
{ // 2
width:600,
top:70,
left:0,
opacity:80,
z:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
z:4
},
{ // 4
width:600,
top:70,
left:600,
opacity:80,
z:3
},
{ //5
width:400,
top:20,
left:750,
opacity:20,
z:2
}
];

接下来我们通过点击箭头的方向来计算这个json位置信息集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
function change(flag) {
// 来判断箭头方向(滚动方向)
if(flag)
{
// 把 最后一个json 删除 并且把最后一个添加到json 第一个位置
json.unshift(json.pop());
}
else
{
// 移除第一个 放到json 最后一个
json.push(json.shift());
}
}

移动动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
* Created by andy on 2015/11/23.
*/
// 多个属性运动框架 添加回调函数
function animate(obj, json, fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for (var attr in json) { // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if (attr == "opacity") {
current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
console.log(current);
}
else {
current = parseInt(getStyle(obj, attr)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = (json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if (attr == "opacity") // 判断用户有没有输入 opacity
{
if ("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) / 100;
}
else { // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";

}
}
else if (attr == "zIndex") {
obj.style.zIndex = json[attr];
}
else {
obj.style[attr] = current + step + "px";
}

if (current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if (flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if (fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调
{
fn(); // 函数名 + () 调用函数 执行函数
}
}
}, 10)
}
function getStyle(obj, attr) { // 谁的 那个属性
if (obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else {
return window.getComputedStyle(obj, null)[attr]; // w3c 浏览器
}
}

触发动画执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
onclick = function() {
if(this.className == "prev")
{
// alert("左侧") 移除第一个 放到json 最后一个
if(jieliu == true)
{
change(false);
jieliu = false; // 点击完毕之后,立马取反
}

}
else
{
// alert('右侧'); 把 最后一个json 删除 并且把最后一个添加到json 第一个位置
if(jieliu == true)
{
change(true);
jieliu = false; // 点击完毕之后,立马取反
}
}
}

function change(flag) {
// 来判断
if(flag)
{
// 把 最后一个json 删除 并且把最后一个添加到json 第一个位置
json.unshift(json.pop());
}
else
{
// 移除第一个 放到json 最后一个
json.push(json.shift());
}
// 为什么给for呢? 以为我们的json 有5个 盒子li 有 5个
for(var i=0;i<json.length; i++)
{
animate(lis[i],{
width: json[i].width,
top: json[i].top,
left: json[i].left,
opacity:json[i].opacity,
zIndex:json[i].z
},function(){ jieliu = true;}) // 回调函数是等动画执行完毕 才行
}
}

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×