{"id":39,"date":"2009-12-03T09:47:11","date_gmt":"2009-12-03T01:47:11","guid":{"rendered":"http:\/\/www.magki.com\/blog\/?p=39"},"modified":"2010-04-12T18:24:10","modified_gmt":"2010-04-12T10:24:10","slug":"a-sample-marqee-for-jquery","status":"publish","type":"post","link":"http:\/\/www.ijony.com\/blog\/2009\/12\/a-sample-marqee-for-jquery.html","title":{"rendered":"\u5199\u4e86\u4e2a JQuery \u7684\u5e73\u6ed1\u6a2a\u5411\u8dd1\u9a6c\u706f"},"content":{"rendered":"

\u61d2\u7684\u8bf4\u5e9f\u8bdd\u4e86\uff0c\u76f4\u63a5\u8d34\u4ee3\u7801\u5427\u3002<\/p>\n

HTML \u90e8\u5206<\/p>\n

<div id=”marqee” style=”width:200px; height:24px; overflow:hidden;”>
\n    <table border=”0″ cellspacing=”0″ cellpadding=”0″>
\n        <tr>
\n            <td id=”marqee_frame” height=”24″><table border=”0″ cellspacing=”0″ cellpadding=”0″>
\n                <tr>
\n                    <td nowrap=”nowrap”>\u6eda\u52a8\u6d4b\u8bd5\u7528\u6587\u5b57\u4e00<\/td>
\n                    <td nowrap=”nowrap”>\u6eda\u52a8\u6d4b\u8bd5\u7528\u6587\u5b57\u4e8c<\/td>
\n                    <td nowrap=”nowrap”>\u6eda\u52a8\u6d4b\u8bd5\u7528\u6587\u5b57\u4e09<\/td>
\n                    <td nowrap=”nowrap”>\u6eda\u52a8\u6d4b\u8bd5\u7528\u6587\u5b57\u56db<\/td>
\n                <\/tr>
\n            <\/table><\/td>
\n            <td id=”marqee_tmp” height=”24″><\/td>
\n        <\/tr>
\n    <\/table>
\n<\/div><\/p><\/blockquote>\n

JS \u90e8\u5206<\/p>\n

var speed=20;
\n$(‘#marqee_tmp’).html($(‘#marqee_frame’).html());
\nfunction Marquee(){
\n    var w = $(‘#marqee’).width() – $(‘#marqee_frame’).width();
\n    if(w<0) w=0;
\n    if($(‘#marqee_tmp’).width() – $(‘#marqee’).scrollLeft() <= w){
\n        $(‘#marqee’).scrollLeft($(‘#marqee’).scrollLeft() – $(‘#marqee_frame’).offsetWidth);
\n    }else{
\n        $(‘#marqee’).scrollLeft($(‘#marqee’).scrollLeft() + 1);
\n    }
\n}
\nvar MyMar=setInterval(Marquee,speed);
\n$(‘#marqee’).hover(
\n    function(){ clearInterval(MyMar) },
\n    function(){ MyMar=setInterval(Marquee,speed) }
\n);<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

\u61d2\u7684\u8bf4\u5e9f\u8bdd\u4e86\uff0c\u76f4\u63a5\u8d34\u4ee3\u7801\u5427\u3002 HTML \u90e8\u5206 <div id=”marqee” […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[14],"_links":{"self":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/39"}],"collection":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":0,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}