2010-11-30 2 views
1

hier ist die Website: http://yumeituan.host.181idc.com/Horizontal-Scrolling-Text wird nicht bewegen, wenn der Text ist nicht Englisch

alt text

der Text des Bildes unter Englisch ist. Wenn der Text innerhalb des "barword" div in nicht-englischen Text geändert wurde, dann wurde nicht geblättert oder verschoben. kann es jemand herausfinden. thx.

hier ist der CSS-Code:

.share-left{ 
    background:url(images/share-left.png) no-repeat 0 0; 
    width:21px; 
    height:30px; 
    float:left; 
} 
#bar{ 
    float:left; 
    position:relative; 
    background:url(images/bg-share-corner.png) no-repeat -39px 0; 
    height:22px; 
    padding-top:8px; 
    width:128px; 
    overflow:hidden; 
} 
#barword{ 
    position:relative; 
    width:128px; 
    height:22px; 
    overflow:hidden; 
} 
.share-right{ 
    background:url(images/bg-share-corner.png) no-repeat 100% -50px; 
    width:21px; 
    height:30px; 
    float:left; 
} 

HTML-Code:

<div class="share-left"> 
    </div> 
    <div id="bar"> 
    <div id="barword">aaaaaaaaabbbbbbbbbbbbbcccccccccccccddddddddddd</div> 
    </div> 
    <div class="share-right"> 
    </div> 

js Code:

<script type="text/javascript"> 
var scrollingBox; 
var scrollingInterval; 
var delay=100; 
var dragging=false; 
var test; 
var mouseY; 
var mouseX; 
window.onload = function(){ 
    test = document.getElementById("barword"); 
    test.onmousedown = down; 
    test.onmousemove = move; 
    test.onmouseup = up; 

    //test.style.position = "relative"; 
    //test.style.top = "0px"; 
    //test.style.left = "0px"; 
} 
function down(event) 
{ 
    event = event || window.event; 
    dragging = true; 
    mouseX = parseInt(event.clientX); 
    mouseY = parseInt(event.clientY); 
    //objY = parseInt(test.style.top); 
    //objX = parseInt(test.style.left); 
} 
function move(event){ 
    event = event || window.event; 
    if(dragging == true){ 
    var x,y; 
    //y = event.clientY - mouseY + objY; 
    //x = event.clientX ; 
    //test.style.top = y + "px"; 
    //test.style.left = x + "px"; 
    test.scrollLeft=3*(event.clientX-713); //0~272 
    //console.log(test.scrollLeft);//713~839 

    } 
} 
function up(){ 
    dragging = false; 
} 
//1.初始化滚动新闻 
function initScrolling(obj){ 
    scrollingBox = document.getElementById(obj); 
    //scrollingBox.style.width = "20px"; 
    //scrollingBox.style.overflow = "hidden"; 
    scrollingInterval = setInterval("scrolling()",delay); 
    scrollingBox.onmouseover=function(){ 
    clearInterval(scrollingInterval); 
    }; 
    scrollingBox.onmouseout=function(){ 
    scrollingInterval = setInterval("scrolling()",delay); 
    } 
} 
//3.滚动效果 
function scrolling(){ 
    //开始滚动 
    scrollingBox.scrollLeft++; 
    var origin = scrollingBox.scrollLeft++; 
    //console.log(test.scrollLeft); 
    if(origin == scrollingBox.scrollLeft){ 
    //延时固定时间后返回顶部 
    setTimeout("scrollingBox.scrollLeft=0",1000) 
    } 
} 
initScrolling("barword"); 
</script> 

Antwort

2

Das Problem auf Englisch ist nicht verwandt oder nicht -Englischer Text. Es wird verursacht, weil Sie Leerzeichen zwischen Wörtern einfügen.

das Problem zu lösen, fügen Sie <nobr> um den Text, zum Beispiel:

<div id="barword"><nobr>远大路金源店:海淀区远大路1号金源时代购物中心5层</nobr></div> 

Der Grund dafür ist das Skript passiert ist „scrollleft“, um den Text Scroll zu machen ... standardmäßig verwendet, wenn es sind leere Leerzeichen im Text, es wird zu neuen Zeilen umgebrochen, so dass scrollLeft immer Null ist. Wenn Sie das Tag <nobr> hinzufügen, erzwingen Sie den gesamten Text in einer Zeile, und scrollLeft hat den gewünschten Effekt.

+1

Für Interessenten, Testfall ist hier verfügbar: http://jsfiddle.net/9decF/ :) –

+0

danke !!!!!!!!!!!!!!!!!!!!!!! !!Es klappt. – tunpishuang

Verwandte Themen