Horizontal-scrolling text won't scroll when text is non-english

here is the website: http://yumeituan.host.181idc.com/

the text of image below is english. when the text inside the "barword" div changed to non-english text , then it did not scroll or draggle. can anyone figure it out. thx.

here is the 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="t开发者_开发知识库ext/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>

The problem is not related to English or non-English text. It's caused because you put blank space between words.

To solve the problem, add <nobr> around the text, for example:

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

The reason this is happening is the script is using "scrollLeft" to make the text scroll... by default when there are blank spaces in the text, it's being wrapped to new lines thus scrollLeft will always be zero. By adding the <nobr> tag you force the whole text in one line and the scrollLeft has the desired effect.