| css 实现 图片左右滑动查看的效果 | 您所在的位置：网站首页 › 设置左右滑动 › css 实现 图片左右滑动查看的效果 |
css 实现 图片左右滑动查看的效果
|
其实除了除了轮播图的那种图片效果外，图片滑动查看的效果 在网站中引用也是很多的，特别是在移动端，pc端的也有 就是我们是通过鼠标点击滑动的效果 我们先来看下效果吧
这样的效果 其实没必要用到js 直接用纯css就能实现 思路大概是 父元素 包括一个子元素 然后 如果高度和子元素高度不一致的话 还得再竖向方向上设置一个 hidden 然后里面 子元素 要设置一个比较长的 宽度 父元素 设置 overflow-x : auto; 就可以了 我们看下代码实现吧 dom布局 
样式代码 子元素 你可以设置弹性布局 也可以 设置浮动 #img-content { width: 100%; overflow-x: auto; } .img-list { display: flex; width: 830px; } .img-list .img-list-item { width: 150px; height: 150px; } .img-list .img-list-item + .img-list-item { margin-left: 20px; } .img-list .img-list-item img { width: 100%; height: 100%; }然后就实现上面的效果了 当然滚动的时候 可能出现横线滚动条 看你需求要不要去掉了 我之前有些关于滚动条去掉的博客 大家可以去看看 关注我 持续更新前端知识 |
【本文地址】
公司简介
联系我们