手机移动端鼠标横向拉动滚动内容-网站建设常用功能代码

手机移动端鼠标横向拉动滚动内容-网站建设常用功能实现，这功能简单，易操作，新手也会弄，对站长使用，话不多说，直接给代码：

1. overflow-x: auto;
   
2. white-space:nowrap;

复制代码

横向自由，不换行。
案例代码：

1. <style type="text/css">
   
2. 
   
3. img{
   
4. height:200px;
   
5. }
   
6. #ZiDiu{
   
7. display: inline-block;
   
8. float: left;
   
9. overflow-x: auto;
   
10. white-space:nowrap;
    
11. }       
    
12. 
    
13. </style>
    
14. <div id = "ZiDiu" >       
    
15. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
16. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
17. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
18. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
19. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
20. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
21. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
22. <img src="http://img30.zidiu.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
    
23. <img src="http://img30.zidiu.com/jr_image/jfs/t2089/259/1344864990/31575/e10681a6/56567151N00597360.jpg" class="uploadImg" alt="" id="localfile" >
    
24. <img src="http://img30.zidiu.com/jr_image/jfs/t2320/340/1246298565/41235/6a164b17/5652bcb7Na9f44ab3.jpg" class="uploadImg" alt="" id="localfile" >
    
25. </div>

复制代码