|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2025-2-15 10:46 编辑
使用父元素的 scroll 方法翻滚元素内部的图片，需要精准计算翻滚的距离（父元素的宽或高），这样才能令图片翻到父元素时占满父元素的地儿。为此，图片需要无缝衔接，不论是横排还是竖排。
先说横排。IMG标签属于行内标签，其display属性缺省时默认使用 inline 值。当父元素宽高固定并让图片按100%存放其内时，若只是一张图片，那它正好占满整个父容器，但是如果放置多张图片且禁止溢出（overflow: hidden;）和折行（white-space: nowrap;），那么图片就会横向排列，两两之间有一点间隔，这点间隔是占地的，会直接影响 scroll() 所需参数的计算，需要消除掉，简单的做法是，父元素加入 font-size: 0; 属性和值，就是字体大小为0即可。
再说竖排。父元素同样需要防止溢出，但要允许折行（默认，不要 white-space: nowrap; 属性即可），父元素加入属性值 line-height: 0; ，这是设置行高。然后，IMG标签末尾使用 <br> 标签折行，这样纵排结果上下之间就是无缝的。
除了上述介绍的，图片之间无缝排列还有很多实现手段和技巧，有余力的朋友可以自行网搜学习。
|
评分
-
| 参与人数 4 | 威望 +160 |
金钱 +320 |
经验 +160 |
收起
理由
|
 花飞飞
| + 30 |
+ 60 |
+ 30 |
很给力! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 梦江南
| + 30 |
+ 60 |
+ 30 |
赞一个! |
 樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2025-2-14 22:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-2-15 08:42
发表于 2025-2-15 08:43
楼主
有那工夫不如抽支烟惬意