{"id":2745,"date":"2014-02-13T08:03:34","date_gmt":"2014-02-13T00:03:34","guid":{"rendered":"https:\/\/sdeno.com\/?p=2745"},"modified":"2014-02-12T15:09:54","modified_gmt":"2014-02-12T07:09:54","slug":"jquery-%e6%bb%9a%e5%8a%a8%e6%9d%a1%e7%be%8e%e5%8c%96%e6%8f%92%e4%bb%b6jquery-jscrollbar","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=2745","title":{"rendered":"jquery \u6eda\u52a8\u6761\u7f8e\u5316\u63d2\u4ef6jquery.jscrollbar"},"content":{"rendered":"

jquery.jscrollbar \u662f\u4e00\u4e2a\u57fa\u4e8ejQuery\u7684\u6eda\u52a8\u6761\u63d2\u4ef6\uff0c\u652f\u6301\u6c34\u5e73\u6eda\u52a8\u6761\u548c\u5782\u76f4\u6eda\u52a8\u6761\uff0c\u652f\u6301\u9f20\u6807\u952e\u76d8\u4e8b\u4ef6<\/h2>\n

\u4e3b\u8981\u529f\u80fd<\/h3>\n
    \n
  1. \u652f\u6301\u6c34\u5e73\u6eda\u52a8\u6761<\/li>\n
  2. \u652f\u6301\u5782\u76f4\u6eda\u52a8\u6761<\/li>\n
  3. \u81ea\u52a8\u5224\u65ad\u6c34\u5e73\u6eda\u52a8\u6761\u548c\u5782\u76f4\u6eda\u52a8\u6761\u662f\u5426\u663e\u793a<\/li>\n
  4. \u652f\u6301\u5916\u90e8\u8c03\u7528\u6765\u6eda\u52a8\u5185\u5bb9<\/li>\n
  5. \u652f\u6301\u6eda\u52a8\u6761\u90e8\u5206\u6837\u5f0f\u81ea\u5b9a\u4e49<\/li>\n
  6. \u652f\u6301\u952e\u76d8\u65b9\u5411\u952e\u63a7\u5236<\/li>\n
  7. \u652f\u6301\u9f20\u6807\u6eda\u52a8(\u9700\u8981mousewheel\u63d2\u4ef6)<\/li>\n
  8. \u652f\u6301\u6eda\u52a8\u6761\u663e\u793a\u4f4d\u7f6e\u8bbe\u7f6e(\u5916\u90e8|\u60ac\u6d6e)<\/li>\n
  9. \u652f\u6301\u624b\u52a8\u66f4\u65b0\u754c\u9762<\/li>\n<\/ol>\n

    <\/a>\u4f9d\u8d56\u7684\u5e93<\/h3>\n
      \n
    1. jQuery (http:\/\/jquery.com\/<\/a>)<\/li>\n
    2. jquery.jqdrag (https:\/\/github.com\/daiying-zhang\/jquery.jqdrag<\/a>)<\/li>\n
    3. jquery.mousewheel (\u63d2\u4ef6\u5df2\u7ecf\u5305\u542b\u5728\u672c\u9879\u76ee\u4e2d\uff0c\u6587\u4ef6\uff1ajquery.mousewheel.min.js)<\/li>\n<\/ol>\n

      \u4f7f\u7528\u6b65\u9aa4<\/h3>\n

      1.\u5728<head><\/head>\u6216\u8005<body><\/body>\u4e2d\u5f15\u5165\u4e0b\u5217\u6587\u4ef6:<\/p>\n

      <!--\u5fc5\u987b\u5f15\u5165-->\r\n<script type=\"text\/javascript\" src=\"your-path\/jquery-1.8.1.min.js\"><\/script>\r\n<!--\u5982\u679c\u9700\u8981\u652f\u6301\u9f20\u6807\u6eda\u52a8\u5219\u5f15\u5165\uff0c\u5426\u5219\u53ef\u4ee5\u4e0d\u5f15\u7528-->\r\n<script src=\"your-path\/require\/jquery.mousewheel.min.js\"><\/script>\r\n<!--\u5fc5\u987b\u5f15\u5165-->\r\n<script src=\"your-path\/require\/jquery.jqdrag-1.0.min.js\"><\/script>\r\n<!--\u5fc5\u987b\u5f15\u5165-->\r\n<script src=\"your-path\/min\/jquery.jscrollbar-1.0.2.min.js\"><\/script><\/pre>\n
      2.\u8bbe\u7f6e\u5185\u5bb9\u533a\u57df\u7684\u5927\u5c0f:<\/p>\n
      <!--\u8bbe\u7f6e\u533a\u57df\u5927\u5c0f\uff0c\u5305\u62ec\u6eda\u52a8\u6761--> \r\n<div style=\"width:1300px;height:600px;\">Some long text or other elements...<\/div><\/pre>\n
      3.\u8c03\u7528\u63d2\u4ef6\uff1a<\/p>\n
      $(function(){\r\n    $('#test1,#test2').jscrollbar({\r\n         \/\/some options\r\n    });\r\n});<\/pre>\n
      <\/a>\u793a\u4f8b\u4ee3\u7801<\/h3>\n
      $(function(){\r\n        $('#test1,#test2').jscrollbar({\r\n            width:12, \/\/\u6eda\u52a8\u6761\u5bbd\u5ea6\r\n            color:'orange', \/\/\u6eda\u52a8\u6761\u989c\u8272\r\n            opacity:0.7, \/\/\u900f\u660e\u5ea6\r\n            position:'inner', \/\/\u6eda\u52a8\u6761\u4f4d\u7f6e\r\n            mouseScrollDirection:'horizontal' \/\/\u9f20\u6807\u6eda\u52a8\u65f6\u6eda\u52a8\u7684\u65b9\u5411\r\n        });\r\n\r\n        var jsb2 = $('#test2').jscrollbar('getObject');\r\n\r\n        setTimeout(function(){\r\n            $('#test2 img').css({width:'4000px'});\r\n                \/\/\u6eda\u52a8\u5b9e\u4f8b\u7684\u94fe\u5f0f\u8c03\u7528\uff0c\u65e0\u6cd5\u4f7f\u7528jQuery\u64cd\u4f5cDOM\u7684\u65b9\u6cd5 [\u4e0d\u63a8\u8350]\r\n                jsb2.updateUI()\r\n                     .scrollTo('x',100)\r\n                     .scrollBy('x',50);\r\n\r\n                \/\/jQuery\u7684\u94fe\u5f0f\u8c03\u7528\uff0c\u53ef\u4ee5\u4f7f\u7528jQuery\u64cd\u4f5cDOM\u7684\u65b9\u6cd5  [\u63a8\u8350]\r\n                $('#test1').jscrollbar('scrollBy','x',10)\r\n                           .jscrollbar('scrollTo','x',300)\r\n                           .animate({'opacity':0.8},1000);\r\n        },2000)\r\n});<\/pre>\n
      GitHub\u5730\u5740<\/h3>\n
      https:\/\/github.com\/daiying-zhang\/jquery.jscrollbar<\/a><\/p>\n
      \u8fd0\u884c\u6548\u679c<\/h3>\n
      <\/div>
      <\/div><\/div><\/div>\"http:\/\/www.sanjh.cn\/wp-content\/uploads\/2013\/04\/test2.png\"<\/figure><\/a><\/h3>\n
      <\/div>
      <\/div><\/div><\/div>\"http:\/\/www.sanjh.cn\/wp-content\/uploads\/2013\/04\/test1.png\"<\/figure><\/a>\n
      <\/div>
      <\/div><\/div><\/div>\"http:\/\/www.sanjh.cn\/wp-content\/uploads\/2013\/04\/test3.png\"<\/figure>\n
      \u5728\u7ebf\u6f14\u793a<\/h3>\n
      http:\/\/www.sanjh.cn\/plugs\/jscrollbar\/example\/index.html<\/a>
      \n      \u6253\u5305\u4e0b\u8f7d<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
      jquery.jscrollbar \u662f\u4e00\u4e2a\u57fa\u4e8ejQuery\u7684\u6eda\u52a8\u6761\u63d2\u4ef6\uff0c\u652f\u6301\u6c34\u5e73\u6eda\u52a8\u6761\u548c\u5782\u76f4\u6eda\u52a8\u6761\uff0c\u652f\u6301\u9f20\u6807\u952e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,13],"tags":[],"class_list":["post-2745","post","type-post","status-publish","format-standard","hentry","category-11","category-jquery"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/2745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2745"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/2745\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}