来源博客:【Harryの心阁】
仓库简介
- 此仓库用于JavaScript学习的实例化演示
- 边学边做【演示站点】
主页介绍
- 本页面使用
rem
布局+flex
布局 - 加入了昼夜模式,可自动切换(使用了JavaScript)
- 适配移动端,媒体查询
- 主页标题使用 CSS3中的动画,还有文字阴影搭配使用
- Tab栏,昼夜交替使用了
JavaScript排他思想
,设置自定义属性 - 主页加入【牛年灯笼特效】
- 加入鼠标样式,底部引入导航信息栏-仿
Rocketdock
- 优化昼夜模式,加入切换昼夜模式提示框,使用JavaScript中的定时器和缓动动画函数+CSS3动画
- pc端底部增加留言板,触碰后显示留言板,使用JavaScript中的缓动动画函数
- 去除页面灯笼样式,页面加入jQuery插件,页面去除原生Tab栏使用jQuery框架,加入切换小圆点
- 修复Tab切换后,昼夜按钮消失bug;页面加入svg动画jQuery;加入第五屏时间轴,纯css3;第二屏移动端,点击后技能板块移除
Tab栏介绍
- 第一屏
- 使用了
JavaScript
中的node
操作比如node的增删,大量使用节点
- 第二屏
- 第二屏沿用第一屏node增删节点,使用BOM,定时器等等
- 第三屏 待写
- 第四屏 待写
- 第五屏 时间轴,纯css3
- 第六屏
仓库地址
- 我的仓库地址:【Github】
- 使用时请标明出处谢谢
制作目的
- 更好的掌握学过的JavaScript内容
- 回顾CSS3的知识
- 对jQuery学习的巩固