{"id":208,"date":"2010-12-08T15:56:20","date_gmt":"2010-12-08T07:56:20","guid":{"rendered":"http:\/\/www.xiaojia.info\/?p=208"},"modified":"2011-06-10T10:41:56","modified_gmt":"2011-06-10T02:41:56","slug":"jsmarquee","status":"publish","type":"post","link":"https:\/\/www.luja.cc\/?p=208","title":{"rendered":"js\u63a7\u5236\u6eda\u52a8\u4ee3\u7801"},"content":{"rendered":"<p>\u5e38\u7528js\u63a7\u5236\u6eda\u52a8\u4ee3\u7801\uff0c\u4ece\u7f51\u4e0a\u6536\u96c6\uff0c\u4ee5\u4f9b\u53c2\u8003\u4e4b\u7528\u3002<br \/>\n<!--more--><br \/>\n\u4ece\u53f3\u5f80\u5de6\u6eda\u52a8\u4ee3\u7801\uff1a<br \/>\n[html]&lt;div id=&quot;demo&quot; style=&quot;overflow:hidden;height:100px;width:300px;&quot;&gt;&lt;table align=&quot;left&quot;<br \/>\ncellpadding=&quot;0&quot; cellspace=&quot;0&quot; border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td id=&quot;demo1&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;\/td&gt;&lt;td id=&quot;demo2&quot; valign=&quot;top&quot;&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;\/div&gt;<br \/>\n&lt;script&gt;<br \/>\nvar speed=30<br \/>\ndemo2.innerHTML=demo1.innerHTML<br \/>\nfunction Marquee(){<br \/>\nif(demo2.offsetWidth-demo.scrollLeft&lt;=0)<br \/>\ndemo.scrollLeft-=demo1.offsetWidth<br \/>\nelse{<br \/>\ndemo.scrollLeft++<br \/>\n}<br \/>\n}<br \/>\nvar MyMar=setInterval(Marquee,speed)<br \/>\ndemo.onmouseover=function() {clearInterval(MyMar)}<br \/>\ndemo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br \/>\n&lt;\/script&gt; [\/html]<\/p>\n<p>\u4ece\u4e0b\u5f80\u4e0a\u6eda\u52a8\u4ee3\u7801\uff1a<br \/>\n[html]<br \/>\n&lt;div id=&quot;demo&quot; style=&quot;overflow:hidden;height:100px;width:88px;&quot;&gt;<br \/>\n&lt;div id=&quot;demo1&quot;&gt;<br \/>\n123 &lt;br&gt;<br \/>\n456   &lt;br&gt;<br \/>\n789 &lt;br&gt;<br \/>\n012   &lt;br&gt;<br \/>\n345 &lt;br&gt;<br \/>\n678&lt;br&gt;<br \/>\n901   &lt;br&gt;<br \/>\n234 &lt;br&gt;<br \/>\n567&lt;br&gt;<br \/>\n890 &lt;br&gt;<br \/>\nabc   &lt;br&gt;<br \/>\ndef   &lt;br&gt;<br \/>\nghi   &lt;br&gt;<br \/>\nlmn   &lt;br&gt;<br \/>\nopq   &lt;br&gt;<br \/>\nrst   &lt;br&gt;<br \/>\nuvw &lt;br&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div id=&quot;demo2&quot;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;script&gt;<br \/>\n    var speed=30<br \/>\n    demo2.innerHTML=demo1.innerHTML \/\/\u514b\u9686demo1\u4e3ademo2<br \/>\n    function Marquee(){<br \/>\n\/\/\u5f53\u6eda\u52a8\u81f3demo1\u4e0edemo2\u4ea4\u754c\u65f6<br \/>\nif(demo2.offsetTop-demo.scrollTop&lt;=0)<br \/>\ndemo.scrollTop-=demo1.offsetHeight \/\/demo\u8df3\u5230\u6700\u9876\u7aef<br \/>\nelse{<br \/>\ndemo.scrollTop++<br \/>\n    }<br \/>\n    }<br \/>\n    var MyMar=setInterval(Marquee,speed)\/\/\u8bbe\u7f6e\u5b9a\u65f6\u5668<br \/>\n\/\/\u9f20\u6807\u79fb\u4e0a\u65f6\u6e05\u9664\u5b9a\u65f6\u5668\u8fbe\u5230\u6eda\u52a8\u505c\u6b62\u7684\u76ee\u7684<br \/>\n    demo.onmouseover=function() {clearInterval(MyMar)}<br \/>\n\/\/\u9f20\u6807\u79fb\u5f00\u65f6\u91cd\u8bbe\u5b9a\u65f6\u5668<br \/>\n    demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}<br \/>\n&lt;\/script&gt;<br \/>\n[\/html]<\/p>\n<p>\u4ece\u5de6\u5f80\u53f3\u6eda\u52a8\u4ee3\u7801\uff1a<br \/>\n[html]&lt;div id=&quot;demo&quot; style=&quot;overflow:hidden;height:100px;width:300px;&quot;&gt;&lt;table align=&quot;left&quot; cellpadding=&quot;0&quot; cellspace=&quot;0&quot; border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td id=&quot;demo1&quot; valign=&quot;top&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;\/td&gt;&lt;td id=&quot;demo2&quot; valign=&quot;top&quot;&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;\/div&gt;<br \/>\n&lt;script&gt;<br \/>\nvar speed=30<br \/>\ndemo2.innerHTML=demo1.innerHTML<br \/>\ndemo.scrollLeft=demo.scrollWidth<br \/>\nfunction Marquee(){<br \/>\nif(demo.scrollLeft&lt;=0)<br \/>\ndemo.scrollLeft+=demo2.offsetWidth<br \/>\nelse{<br \/>\ndemo.scrollLeft&#8211;<br \/>\n}<br \/>\n}<br \/>\nvar MyMar=setInterval(Marquee,speed)<br \/>\ndemo.onmouseover=function() {clearInterval(MyMar)}<br \/>\ndemo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br \/>\n&lt;\/script&gt; [\/html]<\/p>\n<p>\u4ece\u4e0a\u5f80\u4e0b\u6eda\u52a8\u4ee3\u7801\uff1a<br \/>\n[html]<br \/>\n&lt;div id=&quot;demo&quot; style=&quot;overflow:hidden; width:128px; height:300px;&quot;&gt;<br \/>\n&lt;div id=&quot;demo1&quot;&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;&lt;img src=&quot;http:\/\/www.baidu.com\/img\/baidu_logo.gif&quot;&gt;&lt;br&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div id=&quot;demo2&quot;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;script language=&quot;javascript&quot;&gt;<br \/>\nvar speed=30<br \/>\ndemo2.innerHTML=demo1.innerHTML<br \/>\ndemo.scrollTop=demo.scrollHeight<br \/>\nfunction Marquee(){<br \/>\nif(demo1.offsetTop-demo.scrollTop&gt;=0)<br \/>\ndemo.scrollTop+=demo2.offsetHeight<br \/>\nelse{<br \/>\ndemo.scrollTop&#8211;<br \/>\n}<br \/>\n}<br \/>\nvar MyMar=setInterval(Marquee,speed)<br \/>\ndemo.onmouseover=function() {clearInterval(MyMar)}<br \/>\ndemo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br \/>\n&lt;\/script&gt;<br \/>\n[\/html]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5e38\u7528js\u63a7\u5236\u6eda\u52a8\u4ee3\u7801\uff0c\u4ece\u7f51\u4e0a\u6536\u96c6\uff0c\u4ee5\u4f9b\u53c2\u8003\u4e4b\u7528\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[176,44],"_links":{"self":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts\/208"}],"collection":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=208"}],"version-history":[{"count":6,"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts\/208\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts\/208\/revisions\/345"}],"wp:attachment":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}