当前位置: 代码迷 >> ASP.NET >> 滚动资讯实现
  详细解决方案

滚动资讯实现

热度:3137   发布时间:2013-02-25 00:00:00.0
滚动新闻实现
使用marquee 绑定数据,显示新闻,但是实现的效果不是想要的。
我想要的是这样:滚动字幕从有向左滚动,每次只滚动显示一条新闻,新闻有多条,但是滚玩一条,滚下一条,如何实现。
现在的效果是:因为使用Repeater绑定数据,一下子把所有的新闻并排往左滚。
请高手指导!

------解决方案--------------------------------------------------------
HTML code
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>单条滚动</title><style type="text/css"><!--td {font-size:12px}.rollboder {BORDER: #bcbcbc 1px solid;}.rollleft {FLOAT: left; WIDTH: 240px}.rollleft STRONG {COLOR: #666}.rollcenter {BORDER-RIGHT: #bcbcbc 1px solid; BORDER-LEFT: #bcbcbc 1px solid; WIDTH: 30px; TEXT-ALIGN: center}.rollright {FLOAT: right; WIDTH: 40px; TEXT-ALIGN: center}.rollright IMG {VERTICAL-ALIGN: middle}--></style></head><body><SCRIPT type=text/javascript>                <!--                var rollText_k=6; //菜单总数                var rollText_i=1; //菜单默认值                //setFocus1(0);                rollText_tt=setInterval("rollText(1)",8000);                function rollText(a){                clearInterval(rollText_tt);                rollText_tt=setInterval("rollText(1)",8000);                rollText_i+=a;                if (rollText_i>rollText_k){rollText_i=1;}                if (rollText_i==0){rollText_i=rollText_k;}                //alert(i)                 for (var j=1; j<=rollText_k; j++){                 document.getElementById("rollTextMenu"+j).style.display="none";                 }                 document.getElementById("rollTextMenu"+rollText_i).style.display="block";                 document.getElementById("pageShow").innerHTML = rollText_i+"/"+rollText_k;                }                 //--></SCRIPT><TABLE height="29" border="0" cellspacing="0" class=rollboder>  <TBODY>  <TR>    <TD height="22" class=rollleft>      <DIV class=rollTextMenus>      <DIV id=rollTextMenu1 style="DISPLAY: block"><STRONG> 本站动态:</STRONG> <A       href="http://www.zcool.com.cn/lanren/vector/20070808/vector073615.shtml" target="_blank">矢量网页栏目标题</A></DIV>      <DIV id=rollTextMenu2 style="DISPLAY: none"><STRONG> 本站动态:</STRONG> <A       href="http://www.zcool.com.cn/lanren/vector/20070807/vector191317.shtml" target="_blank">矢量律动条+箭头</A></DIV>      <DIV id=rollTextMenu3 style="DISPLAY: none"><STRONG> 本站动态:</STRONG> <A       href="http://www.zcool.com.cn/lanren/vector/20070718/vector091158.shtml" target="_blank">2008年北京奥运会会徽矢量</A></DIV>      <DIV id=rollTextMenu4 style="DISPLAY: none"><STRONG> 本站动态:</STRONG> <A       href="http://www.zcool.com.cn/lanren/vector/20070717/vector083943.shtml" target="_blank">2008北京奥运福娃AI矢量图</A></DIV>      <DIV id=rollTextMenu5 style="DISPLAY: none"><STRONG> 本站动态:</STRONG> <A       href="http://www.zcool.com.cn/lanren/vector/20070613/vector175149.shtml" target="_blank">矢量AI格式的红色飘带</A></DIV>      <DIV id=rollTextMenu6 style="DISPLAY: none"><STRONG> 本站动态:</STRONG> <A       href="http://www.zcool.com.cn/lanren/vector/20070605/vector085346.shtml" target="_blank">45个AI格式火矢量图</A></DIV></DIV></TD>    <TD class=rollcenter id=pageShow>3/6</TD>    <TD class=rollright><A title=上一条 href="javascript:rollText(-1);"><IMG src="images/last.gif"       alt=上一条 width="11" height="11" border="0"></A> <A title=下一条 href="javascript:rollText(1);"><IMG src="images/next.gif"       alt=下一条 width="11" height="11" border="0"></A></TD></TR></TBODY></TABLE></body></html>
  相关解决方案