手机站横向滚动

写手机站时我们会遇到像这样的左右滑动的效果,刚开始还误以为是某个js效果,后来才知道,原来是css就可以实现的。

* {margin: 0;padding: 0;}
.box {width: 100%; height: 44px; background: rgba(252, 252, 252, .8); border-bottom: 1px solid #ebebeb; line-height: 40px; overflow: hidden; position: relative;}
.box2 {width: 100%; overflow: hidden; height: 52px; overflow-x: auto; position: relative;}
.box3 {width: 1400px; left: 0; position: absolute; top: 0;}
.box3 div {width: 86px; height: 44px; background: #999; float: left; padding: 0 10px;}
<div class="box">
    <div class="box2">
        <div class="box3">
            <div>first</div>
            <div>second</div>
            <div>third</div>
            <div>four</div>
            <div>five</div>
            <div>six</div>
            <div>first</div>
            <div>second</div>
            <div>third</div>
            <div>four</div>
            <div>five</div>
            <div>six</div>
        </div>
    </div>
</div>
时间: 2024-10-17 23:15:18

手机站横向滚动的相关文章

html5 横向滚动,无滚动条(transform:translate)

html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处] 回头准备封装成插件都放到 github上  https://github.com/wt9213 html: <div class="tab" id="tab"> <div class="scroll-tab" id="

ScrollerLayout——可横向滚动的自定义viewgroup

具体功能看效果图: 小贴士---如何录屏 使用手机自带的录屏软件,录制后为mp4格式,然后再使用下面这个网址介绍的方法,转为gif(我是用的是在线转的那个,挺好用) Android手机如何录制屏幕及转GIF 这个自定义控件涉及到的知识点: 自定义ViewGroup中onMeasure和onLayout的写法 弹性滚动Scroller的用法 速度轨迹追踪器VelocityTracker的用法 如何处理滑动事件冲突 dispatchTouchEvent:(外部拦截)告诉此ScrollLayout的父

小程序横向滚动

在微信小程序应用的越来越多的今天,写小程序的程序员也越来越多了,本人也是刚写完微信小程序,在开发的时候也遇到一些坑,今天先写一下前几天刚遇到的问题: 相信在微信小程序中横向滚动应该是经常用到的,这一点在小程序的官方文档里也是写的比较清楚了,只要用scroll-view这个组件就可以做到, <view class="container"> <view class="section__title">horizontal scroll</vi

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

Android TextView 横向滚动(跑马灯效果)

Android TextView 中当文字比较多时希望它横向滚动显示,下面是一种亲测可行的方法. 效果图: 1.自定义TextView,重写isFocused()方法返回true,让自定义TextView一直处于获取焦点状态. package com.example.shen.marqueedemo; import android.content.Context; import android.util.AttributeSet; import android.widget.TextView;

微信的分享功能(针对web手机站页面进行的分享功能)

把这段js粘贴进,设置可以分享的页面,当微信打开,即可微信进行分享各个圈 $(function(){ var lujing=$("#logimg").attr("src");  //分享中带有的图片 var url=window.location.href;         //分享页的地址 var title=document.title;             //分享内容的标题 weixin("http://m.e-iot.com/images/b

李洪强实现横向滚动的View&lt;二&gt;

上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下:  01 - 创建CFTyreScrollViewCell,继承自UICollectionViewCell

嗨分享-前端技术-帝国CMS手机站修改列表分页(sysShowListMorePage)

http://bbs.phome.net/showthread-31-318753-0.html 如果你的网站使用的是帝国CMS.PC站和手机站各使用一个模板组,但共同使用一个数据库.那么你的PC站和手机站,列表分页样式是一样的吗? 今天<a href="http://www.thy6415.com">嗨分享-前端技术</a>将带你感受不一样的分页样式! PC站可以把分页按1.2.3.4...这样并排 列出来,但手机站是万万不可以这样做的,否则手机屏幕小,分页看

手机站建设HTML5触摸屏touch事件使用介绍

手机站建设HTML5触摸屏touch事件使用介绍技术 maybe yes 发表于2015-01-05 14:42 原文链接 : http://blog.lmlphp.com/archives/56  来自 : LMLPHP后院 市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用,但是效果不够好.PC上还没有哪个事件是可以与触屏手机的触摸事件对