{"id":2416,"date":"2020-02-11T11:44:49","date_gmt":"2020-02-11T03:44:49","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2416"},"modified":"2026-08-18T12:35:23","modified_gmt":"2026-08-18T04:35:23","slug":"%e5%90%91%e4%b8%8a%e6%bb%9a%e5%8a%a8%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2416","title":{"rendered":"\u5411\u4e0a\u6eda\u52a8\u6548\u679c"},"content":{"rendered":"
\n

\u5c31\u4e1a\u540d\u5355\u8fd9\u7c7b\u5c55\u793a\u9875\u7ecf\u5e38\u8981\u5728\u56fa\u5b9a\u9ad8\u5ea6\u91cc\u5faa\u73af\u6eda\u52a8\uff0c\u65e2\u8981\u770b\u8d77\u6765\u201c\u4e00\u76f4\u5728\u52a8\u201d\uff0c\u53c8\u8981\u9f20\u6807\u60ac\u505c\u65f6\u80fd\u505c\u4e0b\u6765\u7ec6\u770b\u3002\u4e0b\u9762\u7528\u4e00\u4efd\u5b8c\u6574\u7684 HTML + CSS + jQuery \u5b9e\u73b0\u5411\u4e0a\u6eda\u52a8\uff0c\u6548\u679c\u5982\u56fe\uff1a<\/p>\n

\"job\"<\/a><\/p>\n

\u601d\u8def\u662f\u628a\u540c\u4e00\u4efd ul<\/code> \u518d\u590d\u5236\u4e00\u4efd\u63a5\u5230\u540e\u9762\uff0c\u6eda\u52a8\u5230\u7b2c\u4e00\u4efd\u5e95\u90e8\u65f6\u628a scrollTop<\/code> \u62c9\u56de\u53bb\uff0c\u89c6\u89c9\u4e0a\u5c31\u662f\u65e0\u7f1d\u5faa\u73af\u3002<\/p>\n

\u4e00\u3001HTML \u7ed3\u6784<\/h2>\n

\u5916\u5c42 .job<\/code> \u63a7\u5236\u603b\u5bbd\uff0c.job-title<\/code> \u662f\u8868\u5934\uff0c#ul-table<\/code> \u662f\u53ef\u89c6\u7a97\u53e3\u3002#uls<\/code> \u653e\u771f\u5b9e\u6570\u636e\uff0c#uls2<\/code> \u7528\u6765\u627f\u63a5\u514b\u9686\u5185\u5bb9\uff0c\u6eda\u52a8\u65f6\u4e24\u6bb5\u5217\u8868\u9996\u5c3e\u76f8\u63a5\u3002<\/p>\n

 <div class=\"job\" style=\"width: 1200px; margin: 0 auto;\">\n\n            <div class=\"panel panel-info\">\n\n                <div class=\"panel-heading job-title\">\n\n                    <span>\u59d3\u540d<\/span>\n\n                    <span>\u5b66\u5386<\/span>\n\n                    <span>\u4e13\u4e1a<\/span>\n\n                    <span>\u5c31\u4e1a\u516c\u53f8<\/span>\n\n                    <span>\u5165\u804c\u5c97\u4f4d<\/span>\n\n                    <span>\u5e74\u85aa<\/span>\n\n                    <span>\u5c31\u4e1a\u57ce\u5e02<\/span>\n\n                <\/div>\n\n                <div class=\"panel-body job-information\">\n\n                    <div class=\"col-md-12 ul-table\" id=\"ul-table\">\n\n                        <ul id=\"uls\">\n\n                            <li><span>\u5f20*\u5f3a<\/span><span>\u5927\u4e13<\/span><span>\u8ba1\u7b97\u673a\u5e94\u7528<\/span><span>\u6df1\u5733\u5b89**\u6770\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>java\u5de5\u7a0b\u5e08<\/span><span>6.0W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u674e*\u94c3<\/span><span>\u5927\u4e13<\/span><span>\u519c\u5b66\u4e0e\u751f\u7269\u79d1\u6280<\/span><span>\u6210\u90fd\u683c**\u5179\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>web\u524d\u7aef\u5de5\u7a0b\u5e08<\/span><span>6.5W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u4e94*\u6d69<\/span><span>\u5927\u4e13<\/span><span>\u8ba1\u7b97\u673a\u5e94\u7528<\/span><span>\u6210\u90fd\u5343**\u4fe1\u606f\u6280\u672f\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>7.2W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u7f57*\u7fd4<\/span><span>\u5927\u4e13<\/span><span>\u673a\u68b0\u5236\u9020<\/span><span>\u6210\u90fd\u683c**\u5179\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>7.8W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u674e*\u9e4f<\/span><span>\u672c\u79d1<\/span><span>\u571f\u6728\u5de5\u7a0b<\/span><span>\u6210\u90fd\u683c**\u5179\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>7.8W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u5f20*\u6770<\/span><span>\u4e13\u79d1<\/span><span>\u7164\u7530\u5730\u8d28<\/span><span>\u4e2d**\u521b\u8fbe\u8f6f\u4ef6\u80a1\u4efd\u6709\u9650\u516c\u53f8<\/span><span>java\u5de5\u7a0b\u5e08<\/span><span>7.0W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u8bb8*\u6587<\/span><span>\u672c\u79d1<\/span><span>\u673a\u68b0\u8bbe\u8ba1\u5236\u9020\u53ca\u5176\u81ea\u52a8\u5316<\/span><span>\u5317\u4eac\u94f6**\u670d\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>7.8W<\/span><span>\u897f\u5b89<\/span>\n\n                            <li><span>\u674e*\u5ef7<\/span><span>\u4e13\u79d1<\/span><span>\u5de5\u5546\u7ba1\u7406<\/span><span>\u897f\u5b89\u79d1**\u667a\u80fd\u6280\u672f\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>5.9W<\/span><span>\u897f\u5b89<\/span>\n\n                            <li><span>\u949f*\u71d5<\/span><span>\u672c\u79d1<\/span><span>\u7535\u6c14\u5de5\u7a0b\u53ca\u5176\u81ea\u52a8\u5316<\/span><span>\u4e2d\u8f6f**\u670d\u52a1\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>12W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u674e*\u6cbb<\/span><span>\u672c\u79d1<\/span><span>\u8f6f\u4ef6\u5de5\u7a0b<\/span><span>\u56db\u5ddd\u897f**\u4fe1\u606f\u6280\u672f\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>7.8W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u738b*\u9f99<\/span><span>\u672c\u79d1<\/span><span>\u571f\u6728\u5de5\u7a0b<\/span><span>\u56db\u5ddd\u4e16\u7eaa**\u7cfb\u7edf\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>11.1W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u6768*\u5d2d<\/span><span>\u5927\u4e13<\/span><span>\u7535\u5b50\u4fe1\u606f\u5de5\u7a0b<\/span><span>\u7d2b**\u4e91\u6570\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>8.5W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u4f55*\u6625<\/span><span>\u672c\u79d1<\/span><span>\u7535\u6c14\u5de5\u7a0b\u53ca\u5176\u81ea\u52a8\u5316<\/span><span>\u56db\u5ddd\u4e16\u7eaa**\u7cfb\u7edf\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>8.5W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u5f20*\u8c6a<\/span><span>\u672c\u79d1<\/span><span>\u7535\u5b50\u4fe1\u606f\u5de5\u7a0b<\/span><span>\u6210\u90fd\u6570**\u8f6f\u4ef6\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>5.2W<\/span><span>\u6210\u90fd<\/span>\n\n                            <li><span>\u5218*\u521a<\/span><span>\u5927\u4e13<\/span><span>\u571f\u6728\u5de5\u7a0b<\/span><span>\u6df1\u5733\u5e02\u62d3**\u8f6f\u4ef6\u6709\u9650\u516c\u53f8<\/span><span>web\u524d\u7aef\u5de5\u7a0b\u5e08<\/span><span>14.3W<\/span><span>\u4e0a\u6d77<\/span>\n\n                            <li><span>\u5218*\u658c<\/span><span>\u672c\u79d1<\/span><span>\u5efa\u7b51\u5b66<\/span><span>\u4e0a\u6d77\u4e2d**\u4fe1\u606f\u79d1\u6280\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>16.9W<\/span><span>\u4e0a\u6d77<\/span>\n\n                            <li><span>\u90dd*\u5efa<\/span><span>\u672c\u79d1<\/span><span>\u751f\u7269\u5de5\u7a0b<\/span><span>\u4e1c**\u5bcc\u4fe1\u606f\u80a1\u4efd\u6709\u9650\u516c\u53f8<\/span><span>Java\u5de5\u7a0b\u5e08<\/span><span>16.9W<\/span><span>\u4e0a\u6d77<\/span>\n\n                        <\/ul>\n\n                        <ul id=\"uls2\"><\/ul>\n\n                    <\/div>\n\n                <\/div>\n\n\n\n            <\/div>\n\n        <\/div><\/code><\/pre>\n
\u4e8c\u3001CSS\uff1a\u56fa\u5b9a\u89c6\u53e3\u4e0e\u5217\u5bbd<\/h2>\n
.job-information .ul-table<\/code> \u9ad8\u5ea6 350px\uff0c\u5e73\u65f6 overflow-y: hidden<\/code>\uff0c\u907f\u514d\u51fa\u73b0\u6eda\u52a8\u6761\u62a2\u89c6\u89c9\uff1b\u60ac\u505c\u65f6\u811a\u672c\u4f1a\u4e34\u65f6\u6539\u6210 scroll<\/code>\u3002\u5404\u5217\u7528\u767e\u5206\u6bd4\u5bbd\u5ea6\u5bf9\u9f50\u8868\u5934\uff0c\u516c\u53f8\u540d\u4e00\u5217\u66f4\u5bbd\uff0c\u5e74\u85aa\u52a0\u7c97\uff0c\u5076\u6570\u884c\u6d45\u5e95\u3002<\/p>\n
.box {\n\n    border-radius: 8px;\n\n    background-color: #fff;\n\n    border: 1px solid rgba(0, 0, 0, .14);\n\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n\n    padding: 15px 20px;\n\n}\n\n\n\n\/* \u5c31\u4e1a\u4fe1\u606f *\/\n\n\n\n.job span.glyphicon {\n\n    color: #3f9fcf;\n\n}\n\n\n\n.job .panel span {\n\n    display: inline-block;\n\n    width: 10%;\n\n    padding: 9px 0px;\n\n    overflow: hidden;\n\n    text-align: center;\n\n}\n\n\n\n.job .panel-body span {\n\n    padding: 0;\n\n    height: 38px;\n\n    line-height: 38px;\n\n}\n\n\n\n.job-information .ul-table {\n\n    height: 350px;\n\n    overflow: auto;\n\n    overflow-y: hidden;\n\n}\n\n\n\n.job-information ul li {\n\n    display: block;\n\n    height: 38px;\n\n}\n\n\n\n.job-title span {\n\n    background: none;\n\n    padding: 0 !important;\n\n}\n\n\n\n.job-title {\n\n    color: #31708f;\n\n    background-color: #d9edf7;\n\n    border-color: #bce8f1;\n\n}\n\n\n\n.job-title span:nth-child(3),\n\n.job ul li span:nth-child(3) {\n\n    width: 15%;\n\n}\n\n\n\n.job-title span:nth-child(4) {\n\n    width: 30%;\n\n}\n\n\n\n.job ul {\n\n    width: 100%;\n\n    padding: 0;\n\n    margin: 0;\n\n}\n\n\n\n.job ul li {\n\n    width: 100%;\n\n    list-style: none;\n\n}\n\n\n\n.job ul li span:nth-child(6) {\n\n    font-weight: 700;\n\n    width: 11%;\n\n}\n\n\n\n.job ul li span:nth-child(4) {\n\n    width: 32%;\n\n}\n\n\n\n.job .ul-table li:nth-child(2n) {\n\n    background: #eff8fc;\n\n}<\/code><\/pre>\n
\u4e09\u3001JavaScript\uff1a\u65e0\u7f1d\u5411\u4e0a\u6eda<\/h2>\n
score_msg(tableID, ulsID, uls2ID)<\/code> \u5148\u628a\u7b2c\u4e00\u4efd\u5217\u8868 HTML \u62f7\u5230\u7b2c\u4e8c\u4efd\uff0c\u518d\u6309 10ms \u9012\u589e scrollTop<\/code>\u3002\u5f53\u6eda\u52a8\u8ddd\u79bb\u8fbe\u5230\u7b2c\u4e00\u4efd\u9ad8\u5ea6\u65f6\uff0c\u7528 i = b - a<\/code> \u56de\u5230\u7b49\u6548\u4f4d\u7f6e\uff0c\u5f62\u6210\u5faa\u73af\u3002\u9f20\u6807\u8fdb\u5165\u6e05\u5b9a\u65f6\u5668\u5e76\u663e\u793a\u6eda\u52a8\u6761\uff0c\u79bb\u5f00\u540e\u4ece\u5f53\u524d scrollTop<\/code> \u7ee7\u7eed\u3002<\/p>\n
<script src=\"..\/js\/jquery.js\"><\/script>\n\n\n\n\t<script>\n\n        $(function () {\n\n\t\t\t\/\/\u5c31\u4e1a\u4fe1\u606f\u5411\u4e0a\u6eda\u52a8\n\n\t\t\tscore_msg(\"ul-table\", \"uls\", \"uls2\");\n\n\t\t})\n\n\t\t\/\/\u5c31\u4e1a\u4fe1\u606f\u5411\u4e0a\u6eda\u52a8\n\n\t\tfunction score_msg(tableID, ulsID, uls2ID) {\n\n\t\t\t$(\"#\" + uls2ID).html($(\"#\" + ulsID).html());\n\n\t\t\tvar i = 0;\n\n\t\t\tvar speed = 10;\n\n\t\t\tvar timer = setInterval(run, speed);\n\n\n\n\t\t\tfunction run() {\n\n\t\t\t\tvar a = $(\"#\" + ulsID).height();\n\n\t\t\t\tvar b = $(\"#\" + tableID).scrollTop();\n\n\t\t\t\tif (a <= b) {\n\n\t\t\t\t\ti = b - a;\n\n\t\t\t\t}\n\n\t\t\t\t$(\"#\" + tableID).scrollTop(i);\n\n\t\t\t\ti++;\n\n\t\t\t}\n\n\t\t\t$(\"#\" + tableID).mouseover(function () {\n\n\t\t\t\tclearInterval(timer);\n\n\t\t\t\t$(\"#\" + tableID).css({\n\n\t\t\t\t\toverflowY: \"scroll\"\n\n\t\t\t\t});\n\n\t\t\t\ti = $(\"#\" + tableID).scrollTop();\n\n\t\t\t});\n\n\t\t\t$(\"#\" + tableID).mouseout(function () {\n\n\t\t\t\t$(\"#\" + tableID).css({\n\n\t\t\t\t\toverflowY: \"hidden\"\n\n\t\t\t\t});\n\n\t\t\t\ttimer = setInterval(run, speed)\n\n\t\t\t});\n\n\n\n\t\t}\n\n\t<\/script><\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
\u73af\u8282<\/th>\n\u5173\u952e\u70b9<\/th>\n\u4f5c\u7528<\/th>\n<\/tr>\n<\/thead>\n
\u7ed3\u6784<\/td>\n#uls<\/code> + #uls2<\/code><\/td>\n\u4e24\u4efd\u76f8\u540c\u5217\u8868\u9996\u5c3e\u76f8\u63a5<\/td>\n<\/tr>\n
\u89c6\u53e3<\/td>\nheight: 350px + overflow hidden<\/td>\n\u53ea\u9732\u51fa\u82e5\u5e72\u884c<\/td>\n<\/tr>\n
\u52a8\u753b<\/td>\nsetInterval + scrollTop++<\/td>\n\u5300\u901f\u5411\u4e0a<\/td>\n<\/tr>\n
\u590d\u4f4d<\/td>\na <= b \u65f6 i = b - a<\/td>\n\u65e0\u7f1d\u5faa\u73af<\/td>\n<\/tr>\n
\u4ea4\u4e92<\/td>\nmouseover \/ mouseout<\/td>\n\u60ac\u505c\u6682\u505c\u5e76\u53ef\u624b\u6ed1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u6ce8\u610f\uff1aspeed = 10<\/code> \u8d8a\u5c0f\u8d8a\u5feb\uff1b\u5217\u8868\u884c\u9ad8 38px \u8981\u548c CSS \u4fdd\u6301\u4e00\u81f4\uff0c\u5426\u5219\u590d\u4f4d\u65f6\u4f1a\u8df3\u4e00\u884c\u3002<\/p>\n
\n
\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1a\u590d\u5236\u4e00\u4efd\u5217\u8868\u63a5\u5230\u540e\u9762\uff0c\u7528 scrollTop \u5300\u901f\u4e0a\u79fb\u5e76\u5728\u5230\u5e95\u65f6\u56de\u7ed5\uff0c\u5373\u53ef\u505a\u51fa\u53ef\u6682\u505c\u7684\u65e0\u7f1d\u5411\u4e0a\u6eda\u52a8\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
\u5c31\u4e1a\u540d\u5355\u8fd9\u7c7b\u5c55\u793a\u9875\u7ecf\u5e38\u8981\u5728\u56fa\u5b9a\u9ad8\u5ea6\u91cc\u5faa\u73af\u6eda\u52a8\uff0c\u65e2\u8981\u770b\u8d77\u6765\u201c\u4e00\u76f4\u5728\u52a8\u201d\uff0c\u53c8\u8981\u9f20\u6807\u60ac\u505c\u65f6\u80fd\u505c\u4e0b\u6765\u7ec6\u770b\u3002\u4e0b\u9762\u7528\u4e00\u4efd\u5b8c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[109,105],"tags":[150],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2416"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2416"}],"version-history":[{"count":3,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2416\/revisions"}],"predecessor-version":[{"id":2422,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2416\/revisions\/2422"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}