前端：实现手机左右滑动效果

需求：手机可以左右滑动，显示商品或者div信息

原理：建立两个盒子，一个是可以看到的手机屏幕盒子，一个是自己设定好的盒子，左右滑动，只显示与手机屏幕盒子交集的部分

代码：

<div id="good-style"><div id="close-icon" @click="show = false">X</div><div id="good-li"><div id="good-img"></div><p>商品1</p></div><div id="good-li"><div id="good-img"></div><p>商品2</p></div><div id="good-li"><div id="good-img"></div><p>商品3</p></div><div id="good-li"><div id="good-img"></div><p>商品4</p></div><div id="good-li"><div id="good-img"></div><p>商品5</p></div><div id="good-li"><div id="good-img"></div><p>商品6</p></div><div id="good-li"><div id="good-img"></div><p>商品7</p></div></div>

样式：

#close-icon {position: fixed;font-size: 2vh;padding-left: 96vw;margin-top: 1vw;font-family: PingFang SC;font-weight: 500;color: rgba(255, 255, 255, 0.8);
}#good-style {position: fixed;top: 72vh;width: 100%;height: 28vh;background-color: rgba(24, 24, 24, 0.8);white-space: nowrap; //不换行overflow-y: scroll; //   -webkit-overflow-scrolling: touch;#good-li {width: 30vw;height: 24vh;// float: left;margin-top: 2vh;margin-left: 2vw;display: inline-block;#good-img {width: 26vw;height: 18vh;float: left;margin-top: 2vh;margin-left: 2vw;background-color: blanchedalmond;}p {text-align: center;padding-top: 19vh;font-family: PingFang SC;font-weight: 500;color: rgba(255, 255, 255, 1);}}
}#good-style::-webkit-scrollbar {//去除滚动条width: 0;height: 0;display: none;
}

实现效果：

前端：实现手机左右滑动效果相关推荐

仿百度动态Android源码,Android 仿百度手机助手首页滑动效果
今天看到百度手机助手首页上的滑动效果非常nice,主要功能归结为: 1.当手指上划时,顶部搜索栏随手指移动距离而缩小到隐藏,隐藏后内容还是可以继续移动 2.手指下滑时,当显示内容达到第一个时,顶部搜索 ...
html5 手机导航栏左右滑动效果,js实现移动端导航点击自动滑动效果
本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于i ...
Axure之手机屏保滑动效果的实现
首先说说最后要实现的效果吧: 界面首先看到的是屏保,然后从屏幕底端上滑(同时底端会出现一个等宽的灰条)之后能够看到主页面!当上滑之后释放的时候上滑的高度超过手机屏幕的1/3则自动滑到顶端,否则自动下滑 ...
iphone 在设置了initial-scale=1 之后，在设置滚动条之后，没有滑动效果的解决办法...
iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了. 关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条 ...
Android 应用开发----7. ViewPager+Fragment一步步打造顶部导航界面滑动效果
ViewPager+Fragment一步步打造顶部导航界面滑动效果在许多应用中,我们常常用到这么一个效果: 可以看到,由于现在的应用数据经常需要涉及到多个模块,所以常常需要使用滑动标签在多个页面之间 ...
Web前端学习6个有效果软件，你值得拥有!
想要让程序猿可以快速有效的工作,辅助工具是非常有必要的,不管是刚学习web前端技术的同学还是已经进入工作的学员,都需要学习和掌握一些Web前端开发工具和软件,Web前端学习6个有效果软件,你值得拥有! ...
【JavaScript】（9）——实例：滑动效果的弹出框
背景:用户的需求千奇百怪,为了满足用户对界面的需求,我这只小菜鸟也是"拼了小命"了.弹出框,大家都很熟悉吧,但是在弹出框中加上滑动效果,这个就是有点小难了,为了这个效果我也是搜寻了 ...
axure动态面板滑动效果
手机端交互中,页面的上下左右滑动是常用的交互形态,今天给大家分享一下如何使用Axure来进行模拟,这里使用动态面板来实现,如果对动态面板不是很了解的同学,请查看专栏里的"动态面板入门教程&q ...
html5仿抖音切换效果,仿抖音视频滑动效果
更新记录 1.6.2(2020-06-04) 优化css3动画效果 1.6.1(2020-05-23) 1.修复串音 2.新增进度条 3.新增弹幕查看更多 scroll-video uniapp仿抖 ...

前端：实现手机左右滑动效果

前端：实现手机左右滑动效果相关推荐

最新文章

热门文章