用css巧妙实现移动端横向滑动展示功能

最新推荐文章于 2024-07-12 16:05:19 发布
最新推荐文章于 2024-07-12 16:05:19 发布
阅读量3.7k 收藏 10
点赞数 1
分类专栏： 前端 css 文章标签： css 滑动效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29207823/article/details/81514787
版权
前端 同时被 2 个专栏收录
58 篇文章 0 订阅
订阅专栏
css
11 篇文章 0 订阅
订阅专栏

公司需要做一个手机横向滑动的效果，不想用js插件，太麻烦，导入代码也多。所以去网上找了一下，用css就能实现，挺方便的。主要利用了display:-webkit-box来实现。

<!DOCTYPE html>
<html>
<head>
    <title>横向滑动</title>
    <style type="text/css">
        .slide-box{
            margin-top: 200px;
            display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
        }
        /*去掉滚动条*/
        .slide-box::-webkit-scrollbar{
            width:0; 
            height:0; 
            display: none;
        }
        .slide-item{
            width: 200px;
            height: 200px;
            border:1px solid #ccc;
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <div class="slide-box">
        <div class="slide-item"></div>
        <div class="slide-item"></div>
        <div class="slide-item"></div>
        <div class="slide-item"></div>
        <div class="slide-item"></div>
    </div>
</body>
</html>

 

 

哈哈哦0
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp+colorui 遮罩穿透问题
weixin_45952434的博客
09-18 689
当换出遮罩时，上下滑动依然可以滑动遮罩底部内容 此时给遮罩的view标签增加catchtouchmove=“return”，就可以防止穿透遮罩问题。
html5横向滑动切换文章页面布局
12-13
这是一款时尚的html5页面布局效果。这个html页面布局将文章设定为不同的面板，在屏幕的可见区域有三个面板，左右两侧的小面板可以点击然后滑动显示上面的文章，也可以通过导航按钮来滑动面板。
css横向滚动条支持鼠标滚轮
最新发布
u014708123的博客
07-12 585
在做视频会议的时候，标准模式视图会有顶部收缩的一种交互方式，用到了横向滚动；一般情况下鼠标滚轮只支持竖向滚动，这次写个demo是适配横向滚动；
div内容横排 html_html5横向滑动布局
weixin_39699670的博客
12-20 1124
本教程将带给大家一种html5页面布局效果。你可能已经在 Skybox 或 website of Lotta Nieminen见到过这种效果。这个页面布局是将一个大的面板放在屏幕中间，两边各有一个小的面板。在上方还有一些导航按钮，当我们点击小面板或导航按钮时，对应的面板将滑动到屏幕的中央。我们将使用CSS 3D Transforms来横向滑动面板，如果浏览器不支持CSS 3D Transforms...
css实现元素的横向运动动画效果
liji_digital的博客
05-07 796
接下来的@keyframes定义动画的具体行为。@keyframes后面的字符串对应前面animation-name的名字。这里to的状态是translateX(100px),表示动画结束时的状态是沿X方向偏移100个像素。animation-iteration-count是动画重复的次数，假如取值是infinite，则重复无限次。animation-direction: alternate表示相邻的两次动画运行的方向是相反的。其中animation-name定义了动画的名字，在后面要用的。
html菜单横向滑动效果,[非js]用css实现移动端菜单横向滑动功能
weixin_42326020的博客
06-05 304
testbody,p { margin:0; padding:0;}.concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; }.box { white-space:nowrap; overflow-x:auto; }/*注释1*/.box::-webkit-scrollbar { width:0; hei...
使用单纯的css 实现横向滚动单条消息
weixin_42342065的博客
05-15 295
前言： 最近在做小程序项目，其中有个需求是有个通知消息，要对这个通知消息实现横向滚动的效果，实现的办法有好几种，这里记录的是单纯的使用css中的动画animation属性进行实现。 代码如下： index.wxml <view class="{{noticeClose?'not':'close_not'}}" >公告：</view> <view class="{{noticeClose?'tips':'close_tips'}}"> <view class="
JS实现移动端整屏滑动的实例代码
10-19
本文将详细阐述如何使用JavaScript来实现移动端页面的整屏滑动效果，重点在于检测用户在屏幕上滑动的方向以及滑动操作的逻辑实现。 首先，实现移动端整屏滑动效果的核心思路是通过监听用户触摸屏幕的事件，主要通过...
Vue实现移动端左右滑动效果的方法
12-12
在Vue.js框架中，实现移动端的左右滑动效果可以借助第三方库vue-touch。vue-touch是一个为Vue.js设计的轻量级手势库，它提供了一系列的手势事件，包括滑动（swipe）、点击（tap）、双击（doubleTap）、捏合（pinch）...
js实现移动端导航点击自动滑动效果
10-19
导航项应该水平排列，以便在横向滑动时展示。 2. **计算宽度**：计算导航项的总宽度以及每个导航项的宽度，这将用于iscroll.js初始化时设置容器的宽度。 3. **iscroll.js初始化**：使用`IScroll`构造函数创建一个...
支持移动端的jQuery滑动条拖动横向图片滚动特效
01-02
在图片的展示上，可以使用CSS的`display: inline-block`或者`float: left`属性来使图片并排显示，从而实现横向滚动的效果。记得在图片的`width`属性上设置合适的值，确保它们可以在有限的空间内水平排列。 最后，...
微信小程序-横向滑动scroll-view隐藏滚动条
08-30
本篇文章主要介绍了微信小程序-横向滑动scroll-view隐藏滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
【css】用css巧妙实现移动端横向滑动展示功能
汪小穆的博客
05-19 2万+
前言：记得以前处理移动端横向滑动展示都是去用js去解决的，要用js进行蛮多处理，要算li的宽度，然后还要用js设置ul盒子的宽度，又要设置最大滑动距离，最小滑动距离等等.......但是现在发现用css就能很好的解决这功能。   一、直接上代码。 &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
前端CSS篇之手写一个横向滚动的消息通知组件
哆啦A瑶的博客
06-06 1867
如果让你自己写一个横向滚动的消息通知组件，你会怎么写呢？网上能找到很多相关的代码，不过大部分实现都不够完美——无法根据消息的长度自动计算滚动所需时间，因此每次改变通知后就得手动调整css动画的时间。我在这里提供一个用vue实现的横向滚动的消息通知组件，该组件能够根据消息长度自动计算单次消息滚动所需时间，并且可以自定义部分属性如：内容显示框的宽度、颜色、滚动速度等。.........
css动画横向滚动广告条
乔的博客
11-09 1019
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
h5 横滑效果的实现
ahubenkui的博客
10-22 843
最近做了h5 项目，要实现横滑动的效果，使用overflow 的属性能实现 看下css 的实现 .list { overflow-x: scroll; overflow-y: hidden; margin-top: 20px; align-items: center; width: 100%; hight: 100%; } .outside { displ...
移动互联网应用——css动画知识点总结
qq_53484457的博客
01-06 220
transition是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态top : 0;left : 0;/* 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition */ /* 使用过渡属性 */ transition : all 2 s linear;
【CSS文字滚动】CSS实现文字横向循环无缝滚动，鼠标移入暂停移出继续（附实测源码）
赏樱看雪撸代码
02-27 7802
CSS实现文字横向循环无缝滚动，鼠标移入暂停移出继续，文字滚动效果，页面实现文字滚动效果，鼠标移入移出暂停和继续
实现移动端touch事件的横向滑动列表效果并循环展示
05-14
实现移动端touch事件的横向滑动列表效果并循环展示的一种常见方法是使用CSS3的transform属性和JavaScript的Touch事件。 首先，创建一个容器 div，设置其宽度为视口宽度的倍数，如 300%。在容器内部创建多个 div 元素，分别放置需要展示的内容。 然后，通过CSS3的transform属性将容器的位置移动到第二个或第三个 div 元素的位置，使得第一个 div 元素在视口外不可见。 接下来，使用JavaScript监听Touch事件，根据手指在屏幕上的移动距离，通过改变容器的transform属性来实现横向滑动效果。同时，当容器滑动到最后一个 div 元素时，将其位置移动到第一个 div 元素的位置，实现循环展示的效果。 下面是一个实现横向循环滑动列表效果的示例代码： HTML： ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> ``` CSS： ```css .container { width: 300%; display: flex; transition: transform 0.3s ease-in-out; } .item { flex-basis: calc(100% / 3); text-align: center; font-size: 30px; } ``` JavaScript： ```js var container = document.querySelector('.container'); var startX, startY, moveX, moveY, distanceX, distanceY; container.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; startY = e.touches[0].clientY; }); container.addEventListener('touchmove', function(e) { moveX = e.touches[0].clientX; moveY = e.touches[0].clientY; distanceX = moveX - startX; distanceY = moveY - startY; if (Math.abs(distanceX) > Math.abs(distanceY)) { e.preventDefault(); container.style.transform = 'translateX(' + (-100 / 3 + distanceX / window.innerWidth * 100) + '%)'; } }); container.addEventListener('touchend', function(e) { if (distanceX > 0 && Math.abs(distanceX) > window.innerWidth / 5) { container.style.transform = 'translateX(' + (-200 / 3) + '%)'; } else if (distanceX < 0 && Math.abs(distanceX) > window.innerWidth / 5) { container.style.transform = 'translateX(' + '0' + '%)'; } else { container.style.transform = 'translateX(' + (-100 / 3) + '%)'; } }); container.addEventListener('transitionend', function() { if (container.style.transform === 'translateX(' + (-200 / 3) + '%)') { container.style.transition = 'none'; container.style.transform = 'translateX(' + (-100 / 3) + '%)'; setTimeout(function() { container.style.transition = 'transform 0.3s ease-in-out'; }, 0); } else if (container.style.transform === 'translateX(' + '0' + '%)') { container.style.transition = 'none'; container.style.transform = 'translateX(' + (-100 / 3 * 2) + '%)'; setTimeout(function() { container.style.transition = 'transform 0.3s ease-in-out'; }, 0); } }); ``` 在这个示例中，我们使用了Flex布局和CSS3的calc()函数来创建了一个横向排列的列表。Touch事件监听了用户的滑动操作，通过改变容器的transform属性来实现横向滑动效果。当滑动到最后一个 div 元素时，通过修改transform属性实现循环展示的效果。同时，我们还添加了一些防抖和节流的优化，使得滑动效果更加流畅。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值