javascript - 滚动的在线帖子

Question

我的问题是我想把这篇文章写成一行并在 x 和 y 上隐藏滚动

我的html

<div id='related-post'>
<div class='relhead'>
<h5><span>أنميات أخرى</span></h5>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'      
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + 
&quot;?
alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp&quot;' 
type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>relatedscript();</script>
</ul>
</div>

</div>

我的CSS`

#related-post  { display : inline-block; font-family: 'jsbold'; font-size: 
14px;  padding-bottom: 7px; border-bottom: 4px solid $(main.color); line-
height: 18px; font-weight: 700; color: #111; text-transform: uppercase;}

我的java脚本

<script type='text/javascript'>
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 8;
var numchars = 90;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function relatedscript(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>

Answer 1

我有点不明白你在问什么。这可能只用 CSS 就可以完成。您能否使用 inspect element 并复制它在加载页面时生成的代码，或者将链接粘贴到您正在使用脚本的页面，以便我查看。

根据我认为你的要求，你可以尝试做这样的事情

<div class="container">
<div class="container-inner">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
</div>

CSS:

.container {width:100%}
.container-inner {width:200%}
.item{float:left}

只需确保您的内部容器比外部容器宽，这应该会为您提供所需的滚动效果。希望这有帮助