摘要：横向滑动功能，在对于html移动端网站的是很实用的，而且可以无限的优化接近APPT的交互效果，对于html来讲，更多的交...
横向滑动功能，在对于html移动端网站的是很实用的，而且可以无限的优化接近APPT的交互效果，对于html来讲，更多的交互上的效果都会依赖于JS实现，但是今天大挖为大家分享一个用css即可以简单实现移动端横向滑动功能的代码，说不多说直接上代码，代码无图片，无加载调用，一屏而成，调整起来也非常的方便。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <title>test</title> <style> body,p { margin:0; padding:0;} .concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; } .box { white-space:nowrap; overflow-x:auto; } /*注释1*/ .box::-webkit-scrollbar { width:0; height:0; display: none; } /*注释2*/ .box div { list-style:none; display:inline-block; width:100px; line-height:30px; margin-right:10px; background:#ccc; text-align:center; } /*注释3*/ .box p { width:100%; height:50px; background:pink; } .box div:last-child { margin:0; } </style> </head> <body> <div class="concent"> <div class="box"> <!-- /*注释4*/ --> <div> <p></p><b>简简单单</b></div><div> <p></p><b>简简单单</b></div><div> <p></p><b>简简单单</b></div><div> <p></p><b>简简单单</b></div><div> <p></p><b>简简单单</b></div><div> <p></p><b>简简单单</b></div> </div> </div> <script> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isUc = u.indexOf('UCBrowser') > -1; //uc浏览器 //var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isAndroid&&isUc){ /*注释5*/ $('.box').on('touchstart',function(){ $(document).on('touchmove',function(e){ e.preventDefault(); }); $(document).on('touchend',function(){ $(document).unbind(); }); }); } </script> </body> </html> |
