教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 337 CSS
本经验介绍在html/css/js 的编程当中,如何实现当一个元素宽度超过父层级时,自动播放滚动动画。
首先,用以演示的html页面结构如图,有几个column,每个column里有几行方格,每个方格里有文字。文字可能过长,超出单元格大小。
首先第一步,禁止文字折行显示,并隐藏超出部分。
对于文字元素使用white-space: nowrap样式。
对于文字的父元素使用overflow: hidden样式。效果如图。
接下来,我们要给宽度超出父元素的情况添加一些样式。
为此,使用js代码实现一个函数,获取所有这样的元素(如图是都含有state-text class的元素),并依次比较他们各自是否超过各自父节点宽度。如果超过,添加一个class用于增加样式。
然后,使用setInterval让这个函数每过一段时间执行一次,如图每3秒检查一下页面上所有class含有state-text的元素。
然后给运行时添加的那个class,编写对应的css样式。
添加一个animation,使用ease-in-out过渡方式,动画含有两个关键帧,用transform中的translateX来实现,如图。
此时已经可以看到动画效果了,但是向左移动100%的话整个单元就空了,因此移动距离应该减去一个父元素的宽度。
为了实现移动距离更加精确,且能适应运行时各种不同尺寸,我们给css样式添加一个变量 --bar-width,并用calc函数来使用它。
在js代码中,添加对应的更新css变量的逻辑。如图,获取父节点宽度,并在子节点上调用style.setProperty来设置css变量值。
最终实现了滚动效果如图所示。即使各个单元格宽度不同,即使宽度是运行时变化的,它们都能实现合理的滚动显示。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
相关文章
怎么用div布局加css样式做网页,怎么做一个网页呢,静态页面的制作是很简单的,我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 479 CSS
css基础教程:[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1,使用网络字体的好处是所有人看到的效果都是样的,效果统一,2,不依赖于用户电脑上是否安装了该字体。......
2023-03-16 327 CSS