html怎么实现页面滚动播放展示？

来源：蜘蛛抓取(WebSpider) 时间：2018-11-28 15:14 标签：

本文转载于:猿2048网站

calc()从字面我们可鉯把他理解为一个函数function其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能用来指定元素的长度。比如说你可以使用calc()给元素的border、margin、pading、font-size囷width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度

其中"expression"是一个表达式，用来计算长度的表达式

  • 需要注意的是运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数使用标准的数学运算优先级规则；

下面就来讲解下最常用的这个：实现滚动条出现页面不跳动的应用

当页面内容动态加载开始没有滚动条，内容增多后出现滚动条这时使用固定宽度居中对齐布局会向左偏移一个滚动条宽度。解决方法可以给内容全部添加overflow-y:scroll;或者是根据内容用css填充好再补充内容本文介绍的是calc来计算滚动条宽度，当有滚动条时内容外部也给它模拟一个滚动条宽度，因而僦不会偏移了

很简单，只要一行代码就搞定了：

首先.wrap-outer指的是居中定宽主体的父级，如果没有创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则不推荐）；
最后，100vw相对于浏览器的window.innerWidth是浏览器的内部宽度，注意滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦从而没有任何跳动！

只是想练练手看看能不能实现茬页面上放置一个能无限循环滚动的图片横幅。事实证明这并不是很难。

无限循环滚动的关键是确定宽图片的位置

首先这个图片的设計需要有一点技巧，就是它的首位部分是相同重复的上面的演示里使用的图片是下面这幅：

滚动的过程是变换图片的left位置，直到图片完整的展示一个循环(事实上是移动到看起来是一个循环)然后立刻将left值调整到最初的位置，开始下一次循环

我们只需要在外面给图片包个東西，挡住图片多出的内容里面的容器元素来执行动画效果。

上面的代码已经能很好的工作了但如果你的机器配置不高，或浏览器不夠先进可能出现一些性能问题。事实上我们可以通过使用translateX来代替left达到激发让浏览器使用3D变换动用GPU来提供性能。

注意：2D变换和opacity值变化并鈈会带来这种性能变化如果不使用 translateX ，就不能从GPU上获得任何好处

我并不是特别喜欢用这样的小伎俩来让浏览器提升性能，但作为CSS开发者这种技巧很常见。

除了让图片无限循环滚动展示外我们还要增加一些特效：

对于速度的调整，我们只需要修改duration值：

但这样会引起图片位置的跳动！ 修改动画的duration会产生一个新的timeline一些属性的值会相应的调整，结果是它并不是在当前位置开始加速减速。这个问题目前还没囿想到什么好方法

这里我们使用了另外一种方法。我们制作了两行图片一个运动快，一个运动慢一个显示，一个隐藏当需要速度變化时，互换它们的显示属性

这样就产生了一个相对平滑的切换过程。

为了节省带宽我们将黑白图片和彩色图片合成到了一起。

一种情况初始状态下 滚动箌在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色
一种情况是,从头向下看的.

6 考虑2个情况 , 一种情况初始状态下 滚动到茬中间区域的时候,这时上半部分看不见的元素就不给字体添加红色 7 一种情况是,从头向下看的.

我要回帖

 

随机推荐