自丢网
标题:
手机移动端鼠标横向拉动滚动内容-网站建设常用功能代码
[打印本页]
作者:
admin
时间:
2020-7-11 11:24
标题:
手机移动端鼠标横向拉动滚动内容-网站建设常用功能代码
手机移动端鼠标横向拉动滚动内容-
网站建设
常用功能实现,这功能简单,易操作,新手也会弄,对站长使用,话不多说,直接给代码:
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>
复制代码
欢迎光临 自丢网 (https://www.zidiu.com/)
Powered by Discuz! X3.5