标签：style blog io ar color os sp java on
metrojs.js和jquery.mousewheel.min.js这两个是必须要有的
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/metrojs.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <style> .panorama { position:relative; overflow:auto; overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling: touch; -ms-touch-action: manipulation; -ms-scroll-chaining:none; width:100%; } .content-wrapper { overflow:auto; position:relative; padding-bottom:60px; } </style> </head> <body> <div class="panorama"> <div class="content-wrapper"> <table> <tr> <td>1项目编号</td> <td>2项目编号/项目名称/主责处室/项目经理</td> <td>3项目编号/项目经理</td> <td>4项目编号/主责处室/项目经理</td> <td>5项目编号/室/项目经理</td> <td> <table> <tr> <td>qwergtyhjfdvbu</td> </tr> </table> </td> <td>7项目编号/项目名称/主责处室/项目经理</td> <td>8项目编室/项目经理</td> <td>9项目编号/项目名称/主责处室/项目经理</td> <td>10项目编号/项目名称/主责处室/项目经理</td> <td>11项目编号/责处室/项目经理</td> <td>12项目编号/项目名称/主责处室/项目经理</td> <td>13项目编责处室/项目经理</td> <td>14项目编号/项目名称/主责处室/项目经理</td> <td>15项目编号/项目名称/主责处室/项目经理</td> <td>16项目责处室/项目经理</td> <td>17项目编号/项目名称/主责处室/项目经理</td> <td>18项目编号/项目名称/主责处室/项目经理</td> <td>19项目编号/项目名称/主责处室/项目经理</td> </tr> <tr> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名室/项目经理</td> <td>项目编处室/项目经理</td> <td>项目室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> <td>项目编号/项目名称/主责处室/项目经理</td> </tr> </table> </div> </div> </body> </html>
js代码为：
$(document).ready(function () { var $panos = $(".panorama") stgs = { size: ‘auto‘, padRight: 48, showScroll: window.showScroller || false, contentSel: ".content-wrapper", contentWidthSel: typeof (window.contentWidthSel) !== "undefined" ? window.contentWidthSel : ".content-wrapper table" }, metrojs = $.fn.metrojs; if (metrojs.capabilities === null) metrojs.checkCapabilities(); if ($panos.length > 0){ $panos.each(function (idx, ele) { var $pano = $(ele); var panoHeight = $pano.height(); var panoWidth = $pano.width(); if (!metrojs.capabilities.canTouch) { if (!stgs.showScroll) $pano.css({ ‘overflow-x‘: ‘hidden‘ }); setPanoWidth($pano, stgs); $pano.bind("mousewheel.metrojs", function (event, delta) { if (event.ctrlKey) return; event.preventDefault(); var amount; if (delta < 0) { amount = 90; } else { amount = -90; } $pano.scrollLeft($pano.scrollLeft() + amount); }); }else{ setPanoWidth($pano, stgs); } }); } function setPanoWidth($pano, stgs) { if (stgs.size === ‘auto‘) { var width = stgs.padRight; $pano.find(stgs.contentWidthSel).each(function () { width += $(this).outerWidth(true); }); // debug // $(".site-title").append(width + ‘-‘); $pano.find(stgs.contentSel).css({ width: width + ‘px‘ }); } else if (stgs.size.length > 0) { // debug // $(".site-title").append(stgs.size + ‘+‘); $pano.find(stgs.contentSel).css({ width: stgs.size }); } } });
标签：style blog io ar color os sp java on
原文地址：http://www.cnblogs.com/cjqa/p/4108214.html
