Question

这是网站：http://yumeituan.host.181idc.com/

alt text

下面的图片是英文。当“barword”div中的文本更改为非英文文本时，它不会滚动或拖动。任何人都可以搞清楚。 THX。

这是css代码：

.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代码：

  <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>

Answer 1

问题与英语或非英语文本无关。这是因为你在单词之间放了空格。

要解决此问题，请在文本周围添加<nobr>，例如：

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

发生这种情况的原因是脚本使用“scrollLeft”来使文本滚动...默认情况下，当文本中有空格时，它被包装到新行，因此scrollLeft将始终为零。通过添加<nobr>标记，您可以将整个文本强制为一行，并且scrollLeft具有所需的效果。

文本非英语时，水平滚动文本不会滚动

1 个答案: