手机移动端鼠标横向拉动滚动内容-网站建设常用功能实现,这功能简单,易操作,新手也会弄,对站长使用,话不多说,直接给代码:
- overflow-x: auto;
- white-space:nowrap;
复制代码 横向自由,不换行。
案例代码:
- <style type="text/css">
- img{
- height:200px;
- }
- #ZiDiu{
- display: inline-block;
- float: left;
- overflow-x: auto;
- white-space:nowrap;
- }
- </style>
- <div id = "ZiDiu" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t2089/259/1344864990/31575/e10681a6/56567151N00597360.jpg" class="uploadImg" alt="" id="localfile" >
- <img src="http://img30.zidiu.com/jr_image/jfs/t2320/340/1246298565/41235/6a164b17/5652bcb7Na9f44ab3.jpg" class="uploadImg" alt="" id="localfile" >
- </div>
复制代码
|
|