轮播图以及绝对定位元素的自我理解

移动端的轮播图

在移动端的轮播图我们常常用css3的过渡动画来实现
说实在的这是我第一次写移动端的轮播图 也是我第一次使用touch事件以及监听transitionend事件 刚开始老是错
现在做一次总结
1：明白轮播图的原理
我们知道轮播图就是一个展示区 一个候选区 展示区利用overflow: hiddenl;来控制展示区域的大小，让候选区不停地向一个方向移动
我们需要在候选区的首尾添加一个最后一个第一个元素的附属元素
这是为了让我们在无缝播放图片时到达临界点瞬间往回拉 让用户感觉不到回拉的过程
2：我们需要监听过渡结束这个动作 当动画从1-2-3-4-5-1就是5-1这个动作的时候 我们在过渡动画结束的时候将播放的索引设置为1 这里我们主要是监听transitionend事件 异步更新视图 而且在往回拉的时候要将过渡动画清除
不懂的可以看这个DEMO
3：我们监听过渡结束是异步的 所以我们的过渡时间 必须比设置的定时器的时间短 否则监听不到这个事件
狠狠地点击吧

绝对定位对宽度的影响

还是今天写轮播图遇见的 在我的印象里 div元素是块级元素 它的宽度默认是100% 在我给元素绝对定位时 元素的宽度将以最小宽度展示 也就是里面内容的宽度

 }
    .b1{
      height: 100px;
      background-color: red;
    }
    .b2{
      position: absolute;
      margin-top: 20px;
      margin-left: 100px;
      left: 10px;
      height: 100px;
      background-color: red;
    }

“`

ssdsd

“`

在第二个div加了绝对定位之后 它的宽度将以最小宽度展示 除非你手动设置宽度 不论里面的是span 还是p 它的宽度都将被挤压

还有一个有趣的现象是 绝对定位元素的margin和定位left right top bottom 在相同方向是相加的 也就是说 我margin-left: 10px; lef:10px ;
元素将向左偏移20px

OK咯 今天的总结结束了。