{"id":2382,"date":"2023-05-29T01:23:08","date_gmt":"2023-05-28T17:23:08","guid":{"rendered":"https:\/\/www.tra56.com\/?p=2382"},"modified":"2023-05-29T01:24:12","modified_gmt":"2023-05-28T17:24:12","slug":"2382","status":"publish","type":"post","link":"https:\/\/www.tra56.com\/2382.html","title":{"rendered":"jQuery + css \u516c\u544a\u4ece\u5de6\u5f80\u53f3\u6eda\u52a8"},"content":{"rendered":"<pre class=\"brush:html;toolbar:false\">&lt;!DOCTYPE&nbsp;html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;demo&lt;\/title&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&nbsp;type=&quot;text\/css&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\r\n&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.notice-content&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;800px;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;30px;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;nowrap;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/*margin-left:&nbsp;55px;*\/\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/*margin-top:&nbsp;-30px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*\/\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.notice-text&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;red;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;14px;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;span&nbsp;class=&quot;notice-content&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;notice-text&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u516c\u544a\u5185\u5bb9\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;\r\n&lt;\/span&gt;\r\n&lt;script&nbsp;src=&quot;https:\/\/cdn.bootcss.com\/jquery\/3.3.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script&nbsp;type=&quot;text\/javascript&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;$(function()&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u516c\u544a\u6eda\u52a8\r\n&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;.notice-content&quot;).textScroll();\r\n});\r\n&nbsp;\r\n\/**\r\n&nbsp;*&nbsp;\u4ece\u53f3\u5f80\u5de6\u6eda\u52a8\u6587\u5b57\r\n&nbsp;*&nbsp;@returns&nbsp;{undefined}\r\n&nbsp;*\/\r\n$.fn.textScroll&nbsp;=&nbsp;function()&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u6eda\u52a8\u6b65\u957f(\u6b65\u957f\u8d8a\u5927\u901f\u5ea6\u8d8a\u5feb)\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;step_len&nbsp;=&nbsp;60;\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;this_obj&nbsp;=&nbsp;$(this);\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;child&nbsp;=&nbsp;this_obj.children();\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;this_width&nbsp;=&nbsp;this_obj.width();\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;child_width&nbsp;=&nbsp;child.width();\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;continue_speed&nbsp;=&nbsp;undefined;\/\/&nbsp;\u6682\u505c\u540e\u6062\u590d\u52a8\u753b\u901f\u5ea6\r\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u521d\u59cb\u6587\u5b57\u4f4d\u7f6e\r\n&nbsp;&nbsp;&nbsp;&nbsp;child.css({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;this_width\r\n&nbsp;&nbsp;&nbsp;&nbsp;});\r\n&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u521d\u59cb\u52a8\u753b\u901f\u5ea6speed\r\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;init_speed&nbsp;=&nbsp;(child_width&nbsp;+&nbsp;this_width)&nbsp;\/&nbsp;step_len&nbsp;*&nbsp;1000;\r\n&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u6eda\u52a8\u52a8\u753b\r\n&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;scroll_run(continue_speed)&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;speed&nbsp;=&nbsp;(continue_speed&nbsp;==&nbsp;undefined&nbsp;?&nbsp;init_speed&nbsp;:&nbsp;continue_speed);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;child.animate({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;-child_width\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;speed,&nbsp;&quot;linear&quot;,&nbsp;function()&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).css({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;this_width\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroll_run();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\r\n&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u9f20\u6807\u52a8\u4f5c\r\n&nbsp;&nbsp;&nbsp;&nbsp;child.on({\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouseenter:&nbsp;function()&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;current_left&nbsp;=&nbsp;$(this).position().left;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).stop();\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue_speed&nbsp;=&nbsp;(-(-child_width&nbsp;-&nbsp;current_left)&nbsp;\/&nbsp;step_len)&nbsp;*&nbsp;1000;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mouseleave:&nbsp;function()&nbsp;{\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroll_run(continue_speed);\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;continue_speed&nbsp;=&nbsp;undefined;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r\n&nbsp;&nbsp;&nbsp;&nbsp;});\r\n&nbsp;\r\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u542f\u52a8\u6eda\u52a8\r\n&nbsp;&nbsp;&nbsp;&nbsp;scroll_run();\r\n};\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &#038;n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2],"tags":[],"class_list":["post-2382","post","type-post","status-publish","format-standard","hentry","category-html","category-html5"],"_links":{"self":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts\/2382"}],"collection":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/comments?post=2382"}],"version-history":[{"count":2,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts\/2382\/revisions"}],"predecessor-version":[{"id":2385,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/posts\/2382\/revisions\/2385"}],"wp:attachment":[{"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/media?parent=2382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/categories?post=2382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tra56.com\/wp-json\/wp\/v2\/tags?post=2382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}