在ASP.NET中实现文字不间断向左滚动效果?

如题:不使用Marquee标签，效果不怎么好，网上搜了一下，有好多在HTML或ASP里运行没问题，拷贝到ASPX里就报错，大家提供一个比较好用点的  

解决方案 »

  1.   

    在ASPX页面可以运行但是在 模板页中要么报错 要么就不能实现效果 
      

  2.   

    http://www.codeproject.com/KB/edit/dougscrollingtextctrl.aspx
      

  3.   

    http://www.codeproject.com/KB/miscctrl/ScrollingTextControlArtic.aspx
      

  4.   

    以下为代码的内容：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript"><!-- 
    //主要的滚动函数 
    //如果滚动的效果正好是需要的效果 
    //那么你只需要直接调用这个函数即可 
    var moveTag=function(obj){ 
    var _this = this; 
    _this.speed = 10;//移动的速度 
    _this.space = 10 * _this.speed;//移动间隔的时间 
    obj.scrollLeft=0;//初始化滚动的位置(主要是考虑到需要兼容FF) 
    var divList = obj.getElementsByTagName("DIV"); 
    var obj2 = new Object();//包含所有滚动列的div 
    for(var i=0;i<divList.length;i++){ 
    if(divList[i].parentNode==obj){ 
    obj2=divList[i]; 
    break; 
    } 
    } 
    //得到需要滚动的所有列 
    //divList循环两次的目的是为了不让样式名称影响滚动代码 
    //也就是尽可能的减少滚动代码与样式名称的耦合 
    var cellCount = 0; 
    _this.cellList = new Array(); 
    for(var i=0;i<divList.length;i++){ 
    if(divList[i].parentNode==obj2){ 
    cellCount++; 
    _this.cellList.push(divList[i]);//需要滚动的所有列 
    } 
    } 
    _this.resetCellList=function(){ 
    //这个函数主要是为了让滚动不间断 
    //在每次滚动到终点的时候需要使用 
    //将已经滚动过的列移到当前列之后 
    for(var i=0;i<_this.cellList.length-1;i++){ 
    obj2.removeChild(_this.cellList[i]); 
    obj2.appendChild(_this.cellList[i]); 
    } 
    //重新获取_this.cellList 
    _this.cellList = new Array(); 
    for(var i=0;i<divList.length;i++){ 
    if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]); 
    } 
    //alert(_this.cellList.length); 
    } 
    _this.resetForMoveRight=function(){ 
    //这个函数主要是为了让滚动不间断 
    //与resetCellList的区别是这个函数是为了向右不间断滚动使用的 
    //在每次滚动到起点的时候需要使用 
    //将当前列之后的所有列移动到当前列之前 
    if(_this.cellList.length>0){ 
    for(var i=_this.cellList.length-1;i>0;i--){ 
    obj2.removeChild(_this.cellList[i]); 
    obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]); 
    } 
    } 
    //重新获取_this.cellList 
    _this.cellList = new Array(); 
    for(var i=0;i<divList.length;i++){ 
    if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]); 
    } 
    //alert(_this.cellList.length); 
    } 
    //alert(_this.cellList.length); 
    obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px"; 
    // 
    //alert(_this.endScroll); 
    var cellScroll = obj.offsetWidth;//每次滚动需要滚动多少距离 
    var endScroll = obj2.offsetWidth - cellScroll;//计算滚动条的终点位置 
    //alert(_this.cellScroll); 
    // 
    _this.moveLength = cellScroll;//初始化移动偏量,为0的时候,在页面加载完毕之后将会立即移动;等于_this.cellScroll表示延迟一会再开始执行 
    _this.scrollEnd = false; 
    _this.scrollTimes = 0; 
    //休息一会儿 
    _this.sleep=function(){ 
    _this.scrollTimes++; 
    if(_this.scrollTimes>=_this.space){ 
    _this.scrollTimes=0; 
    _this.moveLength=0; 
    } 
    }; 
    _this.moveStart = true;//是否开始移动 
    _this.isMoveLeft = true;//是否向左移动 
    _this.move=function(){ 
    obj.onmouseover=function(){ 
    _this.moveStart=false; 
    }; 
    obj.onmouseout=function(){ 
    _this.moveStart=true; 
    }; 
    //重新设定cellList 
    if(obj.scrollLeft>=endScroll && _this.isMoveLeft){//向左移动，并且已经移动到尽头 
    if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整 
    if(_this.cellList.length>0){ 
    _this.resetCellList();//更新cellList 
    obj.scrollLeft=0; 
    }else{ 
    _this.scrollEnd = true; 
    } 
    }else if(obj.scrollLeft<=0 && !_this.isMoveLeft){//向右移动，并且已经移动到尽头 
    if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整 
    if(_this.cellList.length>0){ 
    _this.resetForMoveRight();//更新cellList 
    obj.scrollLeft=endScroll; 
    }else{ 
    _this.scrollEnd = false; 
    } 
    } 
    // 
    if(_this.scrollEnd){//向左移动 
    if(_this.moveLength<cellScroll && _this.moveStart){ 
    obj.scrollLeft--; 
    _this.moveLength++; 
    }else if(_this.moveLength>=cellScroll){ 
    _this.sleep(); 
    } 
    } 
    else{//向右移动 
    if(_this.moveLength<cellScroll && _this.moveStart){ 
    obj.scrollLeft++; 
    _this.moveLength++; 
    }else if(_this.moveLength>=cellScroll){ 
    _this.sleep(); 
    } 
    } 
    }; 
    //自动 
    _this.start=function(){ 
    setInterval(_this.move,_this.speed); 
    }; 
    //右移动 
    _this.moveRight=function(){ 
    _this.scrollEnd = true;//已经滚动到尽头 
    _this.isMoveLeft = false;//向右滚动 
    _this.scrollTimes=0; 
    }; 
    //左移动 
    _this.moveLeft=function(){ 
    _this.scrollEnd = false;//没有滚动到尽头 
    _this.isMoveLeft = true;//向左滚动 
    _this.scrollTimes=0; 
    }; 
    }; 
    // --></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <style><!-- 
    #list{border:#ccc 1px solid;} 
    #list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;} 
    #list{width:150px;height:30px;overflow:hidden;}/*必须的属性，宽度、高度可以自定义*/ 
    #list div div{width:150px;height:30px;float:left;}/*必须的属性，宽度、高度最好与#list的定义一样*/ 
    --></style><style mce_bogus="1">#list{border:#ccc 1px solid;} 
    #list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;} 
    #list{width:150px;height:30px;overflow:hidden;}/*必须的属性，宽度、高度可以自定义*/ 
    #list div div{width:150px;height:30px;float:left;}/*必须的属性，宽度、高度最好与#list的定义一样*/</style> 
    <title>无标题文档</title> 
    </head> 
    <body> 
    <div id="list"> 
    <div> 
    <div>第一列</div> 
    <div>第二列</div> 
    <div>第三列</div> 
    <div>第四列</div> 
    <div>第五列</div> 
    </div> 
    </div> 
    <a href="javascript:moveLeft()" mce_href="javascript:moveLeft()">左移动</a> 
    <a href="javascript:moveRight()" mce_href="javascript:moveRight()">右移动</a> 
    <script type="text/javascript"><!-- 
    var move=new moveTag(document.getElementById("list")); 
    move.start(); 
    move.speed=10;//滚动的速度,默认为10 
    //move.space=0;//滚动间隔时间,默认为滚动速度 * 16 
    //左移动只能移动到最左边，无法一直向左移 
    //为了使滚动没有间断，所以最左边的坐标是不断变化的 
    //move.moveLeft();//这样可以设置默认自右向左移动 
    //move.moveRight();//与move.moveLeft()反方向 
    var moveLeft=move.moveLeft; 
    var moveRight=move.moveRight; 
    //想要一个页面上有N个地方滚动？ 
    //没问题！只需要多new几个实例即可实现 
    // --></script> 
    </body> 
    </html> 本篇文章来源于 动态网页社区  原文链接：http://www.aspchina.net/html/sheji/js/542.html
      

  5.   

    找了几个单独在ASPX页面里运行没问题，怎么一拷贝到模板页里运行要么报错要么就不能实现预定的效果了  ，谁有没有在模板页中试过？  顶一下
      

  6.   

    呵呵  顶下  我也在做 同样问题  有答案 发我一份哦  [email protected]  谢啦
      

  7.   

    jquery 有现成的插件，还用做，基本效果有了JQUERY，效果不过是个玩笑
      

  8.   

    向上： 
    <base href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> <div id=demo style="overflow:hidden; width:128px; height:300px;"> 
    <div id=demo1> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> </div> 
    <div id=demo2></div> 
    </div> 
    <script language="javascript"> 
    var speed=30 
    demo2.innerHTML=demo1.innerHTML 
    function Marquee(){ 
    if(demo2.offsetTop-demo.scrollTop<=0) 
    demo.scrollTop-=demo1.offsetHeight 
    else{ 
    demo.scrollTop++ 
    } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() {clearInterval(MyMar)} 
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
    </script> 向下： 
    <base href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> <div id=demo style="overflow:hidden; width:128px; height:300px;"> 
    <div id=demo1> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    <img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br> 
    </div> 
    <div id=demo2></div> 
    </div> 
    <script language="javascript"> 
    var speed=30 
    demo2.innerHTML=demo1.innerHTML 
    demo.scrollTop=demo.scrollHeight 
    function Marquee(){ 
    if(demo1.offsetTop-demo.scrollTop>=0) 
    demo.scrollTop+=demo2.offsetHeight 
    else{ 
    demo.scrollTop-- 
    } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() {clearInterval(MyMar)} 
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
    </script> 向左： 
    <base href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> 
    <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div> 
    <script> 
    var speed=30 
    demo2.innerHTML=demo1.innerHTML 
    function Marquee(){ 
    if(demo2.offsetWidth-demo.scrollLeft<=0) 
    demo.scrollLeft-=demo1.offsetWidth 
    else{ 
    demo.scrollLeft++ 
    } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() {clearInterval(MyMar)} 
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
    </script> 向右： 
    <base href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> 
    <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="gfjs.gif"><img src="bxtt.gif"><img src="bzjd.gif"><img src="gfjs.gif"><img src="bxtt.gif"><img src="bzjd.gif"></td><td id=demo2 valign=top></td></tr></table></div> 
    <script> 
    var speed=30 
    demo2.innerHTML=demo1.innerHTML 
    demo.scrollLeft=demo.scrollWidth 
    function Marquee(){ 
    if(demo.scrollLeft<=0) 
    demo.scrollLeft+=demo2.offsetWidth 
    else{ 
    demo.scrollLeft-- 
    } 
    } 
    var MyMar=setInterval(Marquee,speed) 
    demo.onmouseover=function() {clearInterval(MyMar)} 
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
    </script>
      

  9.   

    顶一下 ，关键是我找到的 在ASPX页面运行没问题 ，但是在 模板页里就不能显示效果 。。
      

  10.   

    模板页中ID变了 JS中修改下ID就可以