CSS和JS部分知识点的运用(小A一轮)

CSS和JS部分知识点的运用(小A一轮)
- 首页
- - 首页大标题蓝色边框动画的实现
  - 头部导航条黄色块的实现
  - 第三个英文标题透明字体的实现
- 通过伪元素修饰各个标题
- - 右侧导航条
  - 右侧导航栏的样式实现
  - 右侧导航栏展开内容的动画实现
  - 右侧导航栏图标字体的引用
  - 右侧导航栏自动滚轮动画的js实现
- 轮播图
- - 轮播图的弹性容器设置
  - 轮播图无限自动轮播的js实现
  - 轮播点随着轮播图切换的js实现
  - 轮播点点击时的被选中的js实现
- 圈圈动画效果的实现
- 公用样式中的设置
- 关于固定定位与粘滞定位与视距的一个问题

首页

首页大标题蓝色边框动画的实现

关于运动元素的设置
- 设置四个小点于同一位置
- 为防止小点受其他的影响，应用绝对定位

/* 4个点的样式 */
.bule-hoop1 {position: absolute;width: 5px;height: 5px;bottom: 160px;right: -10px;background-color: #0f9cf5;animation: blue1 4s 1s infinite linear;
}

关于动画效果
- 运动从点到线又到点，在一个矩形中应分为8个时期
  - 0~12.5%：向左宽度增加以变成线
  - 12.5%~25%：向右往左缩减宽度并变成左下角的点
  - 25~37.5%：向上增加高度变成线
  - 37.5~50%:从下往上减小高度变成左上角的点
  - 后面也是这个规律
- 根据一个点运动一圈为4s，给后面每个点都延迟1s，制作良好的效果

@keyframes blue1 {from {bottom: 160px;}12.5% {right: -10px;bottom: 160px;width: 640px;height: 5px;}25% {/* 变成点定在左下教 */right: 630px;width: 5px;height: 5px;}37.5% {right: 630px;bottom: 160px;width: 5px;height: 90px;}50% {right: 630px;bottom: 245px;width: 5px;height: 5px;}62.5% {bottom: 245px;right: -10px;width: 640px;height: 5px;}75% {right: -10px;bottom: 245px;width: 5px;height: 5px;}87.5% {bottom: 160px;width: 5px;height: 90px;}100% {bottom: 160px;right: -10px;}
}

头部导航条黄色块的实现

通过给每个选项设置伪元素来实现
脱离文档流防止影响布局，通过visibility来隐藏

/* 通过伪元素设置选项中的黄色下底线 */
.top-bar a::after {position: absolute;bottom: 0;left: 0;right: 0;margin: auto;content: "";height: 6px;background-color: #ffd155;visibility: hidden;transition: .3s;
}/* 设置点击顶部选项时的效果 */
.top-bar a:hover::after {width:80%;visibility: visible;
}
.top-bar a:hover li {color: #0f9cf5;font-weight: bold;
}

第三个英文标题透明字体的实现

通过-webkit-text-stroke 来镂空字体并加自定义颜色的边框

li.banner-font3 {margin-bottom: 20px;margin-left: 15px;z-index: 2;font-size: 40px;font-family: "Franklin Gothic Medium";-webkit-text-stroke: 1px black;/* 镂空字体 */color: white;
}

通过伪元素修饰各个标题

::after 和 ::before设置absolute脱离文档流，不占据位置，然后来实现效果

右侧导航条

右侧导航栏的样式实现

设置导航栏的位置容器为固定定位，并居中
为了防止缩放页面导致看不见或不位于期望的位置
- 采取tranlateX的方式来实现水平位置的确定

.nav-wrapper {position: fixed;left: 0;right: 0;margin: auto;transform: translateX(836%);top: 250px;width: 80px;height: 400px;z-index: 999;
}

设置弹性盒来装元素
- 通过通过空白区的布局属性来调整各个选项之间的位置

.navbox {display: flex;flex-direction: column;justify-content: space-around;align-items: flex-start;width: 61px;height: 440px;
}

右侧导航栏展开内容的动画实现

每个选项后加一个div来存文字内容
动画的实现是通过从0拉长宽度来实现的
设置选中的选项取消透明来突出效果

.nav-content {text-align: center;height: 50px;width: 0px;margin-left: -30px;background-color: #0f9cf5;color: white;line-height: 50px;border-radius: 0px 50px 50px 0px;font-size: 16px;transition: 0.4s;opacity: 0;
}
.navbox li:hover .nav-content {width: 140px;opacity: 1;
}

右侧导航栏图标字体的引用

引入了font-awesome的图标字体库
通过设置i标签，在zeal中查询类名来实现

右侧导航栏自动滚轮动画的js实现

用标签名获取元素
因为这里不太复杂，所以一个事件绑定一个处理程序
所以这里用了ele.onclick = function(){ }，没有用obj.addEventListener(type,fn,false)
里面存放了一个定时器
- 用于设置点击选项之后自动滚动

var li = document.getElementsByClassName("navli");
var u = parseInt(window.pageYOffset);
li[6].onclick = function(){var time6 = setInterval(function(){scrollBy(0,50);u++;if(parseInt(window.pageYOffset) > 7800) {clearInterval(time6);}},1)
}

轮播图

轮播图的弹性容器设置

思想：设置recycle-box一个容纳所有要轮播的组，六个组的话设置七组的长度，因为第七组图要与第一组相同实现不断轮播
对于每组之间的间隔，七组有六个间隔，如果想设置每两组之间100px的间隔
- 满足以下公式recycle-box的宽度=每个轮播组的宽度*7 + 100px * 6，然后利用justify-content来实现弹性盒中空白的分配

.recycle-box {width: 9000px;position: relative;display: flex;justify-content: space-between;
}

轮播图无限自动轮播的js实现

设置定时器，让recycle-box的margin-x从"0"到 “-(每个轮播组的宽度1200+间隔100)*6px”
设置变量i来实现数值上的递增，当i为7801时，再重新设置margin-x为“0”

var timer1 = setInterval(function () {loop1.style.marginLeft = -i + "px";i += 1;
if(i>1 && i< 1200){act1(0);}if(i > 1200 && i<2500){act1(1);}if(i > 2500 && i<3800){act1(2);}if(i > 3800 && i<5100){act1(3);}if(i > 5100 && i<6400){act1(4);}if(i > 6400 && i<7700){act1(5);}
//  很不情愿的写法，因为用swtich对某个点的话，会有随机性if (i == 7801) {// clearInterval(1);loop1.style.marginLeft = "0";i = 1;}

注意：中间的act1函数是实现轮播点和轮播图组同步的效果

轮播点随着轮播图切换的js实现

通过以有样式的class组名的来设置轮播点效果，用for来遍历每个点
这里的"actived"是一个class名，样式是被点亮，q是每个点都有的(样式是未点亮)

var act1 = function (s){for (var n = 0; n < 6; n++) {q[n].className = "q";}q[s].className = "q actived";}

轮播点点击时的被选中的js实现

给每个轮播点设置click事件类型
用for遍历，通过立即执行函数实现给每个点绑定方法

for (var j = 0; j < 6; j++) {(function (k) {q[k].onclick = function () {loop1.style.transition = "1s";//增加切换时的过渡效果loop1.style.marginLeft = -1300 * k + "px";//切换到该点对应的组图clearInterval(timer1);act1(k);};})(j);
}

圈圈动画效果的实现

弹性容器的尺寸变换与动画结合
- 下面时“关于我们”栏的圈圈动画的代码

div.pointer-wrapper {position: absolute;right: 0;bottom: 0px;display: flex;flex-direction: column-reverse;justify-content: space-around;width: 30px;height: 80px;font-size: 20px;animation: longer1 2s infinite alternate;
}
@keyframes longer1 {from {height: 80px;}to {height: 500px;}
}

当鼠标移入矩形时，轮播图悬浮的效果
- 设置视距，结合transform:translateZ来实现悬浮的视距效果

div.pride-wrapper {position: relative;margin-top: 40px;height: 900px;background-image: url(../img/teamHonorbg.png);background-repeat: no-repeat;background-size: cover;perspective: 50px;/* 视距的设置 */
}
/* 团队荣誉的外部容器，含背景 */.pride-box:hover li {border: #f0f0f0 2px solid;box-shadow: 5px 5px 30px #737373;transform: translateZ(1px);
}
/* 设置鼠标在矩形内选项卡会浮动 */

公用样式中的设置

对于设计稿中的1200px，在每一个栏目都设置一个大容器，宽度是整个页面的100%，里面放的是装内容的容器，利用这样来实现水平居中，在它的class类名中增加w即可

.w {/* 给容器设置相对定位，方便子元素在容器内进行布局，不影响其他的容器 */position: relative;/* 设置容器居中 */margin: 0 auto;/* 设计稿中提到的安全距离 */width: 1200px;}

未防止高度塌陷的问题，同样是设置一个公用样式，需要只需要添加类名即可

.clearfix::before,
.clearfix::after {content: "";display: table;clear: both;
}

关于固定定位与粘滞定位与视距的一个问题

在制作右侧导航栏的时候考虑到了这两种定位
总结:设置了粘滞定位的元素，是不脱离文档流的，比如我在body下面加一个div，设置了粘滞定位，给它设置了宽高，则后面的所有内容都会因为这个div的高度下移
- 解决办法：用一个大容器装下面的所有内容，增加一个margin-top = -div的高度
- 另外，粘滞定位的兼容性一般
当设置了固定定位，元素确实脱离了文档流，但是一开始并没有生效（即滚动滚动条元素并没有相对视口固定）
- 原因是给html设置视距

html{prespective : 100px;
}

解决方法
- 对于需要用到视距的元素，在它的父元素设置即可，这样就不会影响到其他元素设置固定定位功能失效的效果

实战知识点(一)：CSS和JS部分知识点的运用(小A一轮)相关推荐

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
京东网站页面编写(HTML、CSS、JS)，包括京东秒杀的倒计时、轮播图等功能
1. 页面效果: 2. 源码(gitee地址):https://gitee.com/meng-shuyu/jingdong 3. 网站图标一般存储在网站的根目录下,如京东网站图标地址为: https: ...
html实现拼图游戏,html、css、js实现拼图游戏
为了进一步熟悉html.css.js,做个一个小游戏加深对相关知识的理解.界面略显粗糙. 目录环境: 相关文件: 游戏效果: 如何得到特定像素的图片步骤: 1.pic.html文件 2.pic.c ...
web前端知识点总结html，css，js，vue，react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
java基础教程知识点,[Java教程]js基础知识点总结
[Java教程]js基础知识点总结 0 2016-11-01 21:00:04 如何在一个网站或者一个页面,去书写你的js代码: 1.js的分层(功能):jquery(tool) 组件(ui) 应用( ...
JS 基础知识点与高频考题解析
变量类型 1,介绍js的基本数据类型. Undefined.Null.Boolean.Number.String 2,类型判断用到哪些方法? typeof typeof xxx得到的值有以下几 ...
html属性 id去重,JS相关知识点总结
一.获取元素方法 1.document.getElementById("元素id号"); 可以使用内置对象document上的getElementById方法来获取页面上设置了id ...
html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总，常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾本文主要介绍JS的跨浏览器兼容性 ...
c++局部对象是什么_小白学Web前端难点是什么 JS进阶知识点有哪些
小白学Web前端难点是什么?JS进阶知识点有哪些?JavaScript是前端小白学习的难点,但又是前端工程师必须要掌握的技能.很多同学反映JavaScript知识点多而杂,不知道如何下手,下面就给大家 ...

实战知识点(一)：CSS和JS部分知识点的运用(小A一轮)

CSS和JS部分知识点的运用(小A一轮)

目录

首页

首页大标题蓝色边框动画的实现

头部导航条黄色块的实现

第三个英文标题透明字体的实现

通过伪元素修饰各个标题

右侧导航条

右侧导航栏的样式实现

右侧导航栏展开内容的动画实现

右侧导航栏图标字体的引用

右侧导航栏自动滚轮动画的js实现

轮播图

轮播图的弹性容器设置

轮播图无限自动轮播的js实现

轮播点随着轮播图切换的js实现

轮播点点击时的被选中的js实现

圈圈动画效果的实现

公用样式中的设置

关于固定定位与粘滞定位与视距的一个问题

实战知识点(一)：CSS和JS部分知识点的运用(小A一轮)相关推荐

最新文章

热门文章