1.什么是BEM?
BEM代表块(Block),元素(Element),修饰符(Modifier)。
模块 –> 没有前缀,多个单词用 - 连接
元素 –> 元素在模块之后,可以有多个层级,以 _ 连接
修饰 –> 某元素、或者某模块特别的状态,必须有一个状态名和状态值,使用 _ 连接 。
2.用到的几种居中方法:
2.1文字垂直居中(文字所在的模块)
height:40px;
line-height: 40px; //高与行高设置为一样的长度
2.2块元素垂直居中于父元素
.header_wrap{
height:80px;
position:relative;
}
// 子绝父相
.header_logo{
height:38px;
position:absolute;
top:50%;
margin-top:-19px; //设置为高的一半
}
2.3块级元素水平居中
margin:0 auto;
3.遇到的没用过的标签
3.1 overflow 属性规定当内容溢出元素框时发生的事情。
—》hidden:内容会被修剪,并且其余内容是不可见的。
3.2 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
3.3 opacity 属性设置元素的不透明级别。
—> 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
3.4 background-size 属性规定背景图像的尺寸。
—>cover :把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain :把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
4.动画的制作
4.1 两种遍历
遍历对象{}:
for(k in screemAnimateElements){
setScreemAnimate(k);
}
遍历数组:
for(var i=0;i<animateElements.length;i++){
document.querySelector(animateElements[i]);
}
4.2字符串截取函数 substr、字符串替换函数replace
substr:
<script type="text/javascript">
var str="Hello world!"
document.write(str.substr(3))
script>
输出:lo world!
replace:
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
script>
将使用 "W3School" 替换字符串中的 "Microsoft":
4.3 transform
这个很好用呀,基本的小动画都可以用这个实现~~
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
具体语法:http://www.w3school.com.cn/cssref/pr_transform.asp
4.4小结
第一屏我都花了一个晚上没弄好,想着明明是跟着视频打的代码为什么别人的能实现效果我的不能…..em….肯定是自己哪里打错了。于是我第二日中午有重新检查代码,然后发现当我点击屏幕的时候控制台报错说XXX的长度获取不到,没有定义。我就奇怪了,明明都定义了。
var element = document.querySelector(animateElements[i]); /
去拿到这个元素,怎么会木有???黑人问号,然后我就只能又倒着看老师操作一遍。发现….哦….自己给第一屏定义的名字拼写错误了…改过来后就能成功完成第一屏的动画了。遇到问题,细心认真!拜托。
5.js动画与交互
5.1 split/join
//为元素删除样式
var delCls = function(element , cls){
var baseCls = getCls(element); //获取样式
//如果当前元素有这个样式
if (baseCls.indexOf(cls) != -1) {
//给element设置样式
//replace(/\s+/g,' ') 加一个正则为了去掉多余的空格符
setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
}
}
split() 方法用于把一个字符串分割成字符串数组。
比如,如果我获取到的元素样式cls= outline aaa ==> split(cls) ==> outline ,aaa
所以我们就能拿到被拆分的两个字符串。
join() 方法用于把数组中的所有元素放入一个字符串。
outline ,aaa ==> outline aaa
5.2 获取滚动页面
要获取当前页面的滚动条纵坐标位置:document.documentElement.scrollTop;
document.body.scrollTop 的话有些浏览器不认识,可能会获取不到长度。反正我用了这个没获取到...一直显示0,然后我就换成上面那个就获取到了。