求一段JS代码文字连续向上滚动

ruolins 2010-12-01 05:45:40

这个页面的最新案例有段文字向上滚动。现在有低端间距。
最好给个例子，让我参考下、

...全文

2476 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

qjmay860909 2010-12-02

打赏
举报

如下，直接修改列表数据就OK了

<script type="text/javascript" src="../JS/news/jquery-1.3.1.js"></script>



	<script type="text/javascript">

	//滚动插件

	(function($){

	$.fn.extend({

			Scroll:function(opt,callback){

					//参数初始化

					if(!opt) var opt={};

					var _this=this.eq(0).find("ul:first");

					var lineH=_this.find("li:first").height(), //获取行高

							line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度

							speed=opt.speed?parseInt(opt.speed,20):500, //卷动速度，数值越大，速度越慢（毫秒）

							timer=opt.timer?parseInt(opt.timer,20):3000; //滚动的时间间隔（毫秒）

					if(line==0) line=1;

					var upHeight=0-line*lineH;

					//滚动函数

					scrollUp=function(){

							_this.animate({

									marginTop:upHeight

							},speed,function(){

									for(i=1;i<=line;i++){

											_this.find("li:first").appendTo(_this);

									}

									_this.css({marginTop:0});

							});

					}

					//鼠标事件绑定

					_this.hover(function(){

							clearInterval(timerID);

					},function(){

							timerID=setInterval("scrollUp()",timer);

					}).mouseout();

			}        

	})

	})(jQuery);



	$(document).ready(function(){

			$("#scrollDiv").Scroll({line:3,speed:600,timer:1000});

	});

	</script>

	</HEAD>

	<body>

		<div id="scrollDiv">

				<ul><li>1111</li><li>1111</li><li>1111</li><li>1111</li><li>1111</li></ul>



		</div>

ruolins 2010-12-02

打赏
举报

[Quote=引用 12 楼 hch126163 的回复:]

http://www.popub.net/script/MSClass.html
[/Quote]
谢谢，问题已经解决了，谢谢大家，马上解决。这个挺好的，推荐下。

hch126163 2010-12-01

打赏
举报

http://www.popub.net/script/MSClass.html

huangwenquan123 2010-12-01

打赏
举报



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

    <title>无标题页</title>

    <style type="text/css">

        #demo{overflow:hidden;width: 300px;height: 20px;}

	#demo1{text-align:center;width: 300px;}

	#demo2{text-align:center;width: 300px;}

    </style>

</head>

<body>

<div id="demo">

                    <div id="indemo">

                        <div id="demo1">

                            <a>F1最年轻冠军</a> <a>米兰德比对决</a>

                            <a>高大宽出狱</a> <a>中国作家富豪</a>

			    <a>广西列车脱轨</a> <a>京沪高铁贯</a>

                        </div>

                        <div id="demo2">

                        </div>

                    </div>

                </div>

                <script type="text/javascript">

        var speed=100;

        var tab = document.getElementById("demo");

        var tab1 = document.getElementById("demo1");

        var tab2 = document.getElementById("demo2");

        tab2.innerHTML = tab1.innerHTML;

        function Marquee()

        {                      

	    if(tab2.offsetTop-tab.scrollTop<=0)

                tab.scrollTop-=tab2.offsetTop;

            else{

                tab.scrollTop++;    

            }

 	}

        var Mar = setInterval(Marquee,speed);

        tab.onmouseover=function(){clearInterval(Mar);}

        tab.onmouseout = function(){Mar = setInterval(Marquee,speed);}

    </script>

</body>

</html>

ds252743641 2010-12-01

打赏
举报

[Quote=引用 3 楼 jianzhang5555 的回复:]
$("ul li:first")这个是什么意思？
[/Quote]

得到ul中的第一个li对象

wuyq11 2010-12-01

打赏
举报

<div class="midtop1">
<script>
var marqueeContent = new Array(); //滚动主题
marqueeContent[0]='<a href="/1.htm"></a>';
marqueeContent[1]='<a href="/2.htm"></a>';
var marqueeInterval = new Array(); //定义一些常用而且要经常用到的变量
var marqueeId = 0;
var marqueeDelay = 4000;
var marqueeHeight = 15;
function initMarquee() {
var str = marqueeContent[0];
document.write('<div id=marqueeBox style="overflow:hidden;height:' + marqueeHeight + 'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>' + str + '</div></div>');
marqueeId++;
marqueeInterval[0] = setInterval("startMarquee()", marqueeDelay);
}
function startMarquee() {
var str = marqueeContent[marqueeId];
marqueeId++;
if (marqueeId >= marqueeContent.length) marqueeId = 0;
if (marqueeBox.childNodes.length == 1) {
var nextLine = document.createElement('DIV');
nextLine.innerHTML = str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML = str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop = 0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1] = setInterval("scrollMarquee()", 10);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if (marqueeBox.scrollTop % marqueeHeight == marqueeHeight) {
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>

</div>

天下在我心 2010-12-01

打赏
举报



   <script>

   var speed=50；

   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>



<div id="demo" style="overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff;"><div id="demo1"><img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764741.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764742.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764743.jpg"><img src="http://www.lanrentuku.com/down/js/images/12460764744.jpg"></div>

<div id="demo2"></div>

</div>

newdigitime 2010-12-01

打赏
举报

$("ul li:first")应该是指第一条li

ruolins 2010-12-01

打赏
举报



<style>

    #gundong1{width:210px;line-height:22px;height:22px;overflow:hidden;}

    #gundong2{list-style-type:none;float:left;}

    a{color:red;}

    </style>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script>

        var tid;

        var pause = false;

        var start = function () {

            tid = setInterval(slide, 10);

        }

        var slide = function () {

            if (pause) return;

            $("ul").scrollTop($("ul").scrollTop() + 2);

            if ($("ul").scrollTop() % 22 == 0) {

                clearInterval(tid);

                $("ul").append("<li>" + $("ul li:first").html() + "</li>");

                $("ul li:first").remove();

                $("ul").scrollTop("0");

                setTimeout(start, 1000);

            }

        }

        $(document).ready(function () {

            $("ul").hover(

           function () { pause = true },

           function () { pause = false }

        );

        })

        setTimeout(start, 1000);

    </script>



<ul id="gundong1">

    <%if (dt22.Rows.Count > 0)

      {

          for (int i = 0; i < dt22.Rows.Count; i++)

          {

     %>

<li id="gundong2"><a href='wangpuView_<%=dt22.Rows[i]["column_id"] %>.html'><%=Common.ChangeStyle(new Common().DealString(dt22.Rows[i]["column_title"].ToString(), 12))%></a></li>

<%}

      } %>

    </ul>

这个是我改造后的代码。但是不滚动，而且数据只显示一条。

Issac25Name 2010-12-01

打赏
举报



<style type="text/css"> 

				        ul,li{margin:0;padding:0;} 

				        #scrollDiv{width:324px;height:115px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 

				        #scrollDiv li{height:25px;padding-left:10px;} 

			        </style> 

			        <script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script> 

			        <script type="text/javascript">

			            //滚动插件 

			            (function($) {

			                $.fn.extend({

			                    Scroll: function(opt, callback) {

			                        //参数初始化(责任编辑：育才门户编辑) 

			                        if (!opt) var opt = {};

			                        var _this = this.eq(0).find("ul:first");

			                        var lineH = _this.find("li:first").height(), //获取行高 

				        line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度 

				        speed = opt.speed ? parseInt(opt.speed, 20) : 500, //卷动速度，数值越大，速度越慢（毫秒） 

				        timer = opt.timer ? parseInt(opt.timer, 15) : 3000; //滚动的时间间隔（毫秒） 

			                        if (line == 0) line = 1;

			                        var upHeight = 0 - line * lineH;

			                        //滚动函数 

			                        scrollUp = function() {

			                            _this.animate({

			                                marginTop: upHeight

			                            }, speed, function() {

			                                for (i = 1; i <= line; i++) {

			                                    _this.find("li:first").appendTo(_this);

			                                }

			                                _this.css({ marginTop: 0 });

			                            });

			                        }

			                        //鼠标事件绑定 

			                        _this.hover(function() {

			                            clearInterval(timerID);

			                        }, function() {

			                            timerID = setInterval("scrollUp()", timer);

			                        }).mouseout();

			                    }

			                })

			            })(jQuery);



			            $(document).ready(function() {

			                $("#scrollDiv").Scroll({ line: 5, speed: 500, timer: 1000 });

			            }); 

			        </script> 

			        <div id="scrollDiv"> 

				        <font size="-2">

					        <ul> 

						        <li>玩家可以在中心对话完成某些固定功能(1)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(2)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(3)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(4)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(5)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(6)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(7)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(8)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(9)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(10)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(11)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(12)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(13)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(14)...</li> 

						        <li>玩家可以在中心对话完成某些固定功能(15)...</li>

					        </ul> 

				        </font>

			        </div>

ruolins 2010-12-01

打赏
举报

$("ul li:first")这个是什么意思？

newdigitime 2010-12-01

打赏
举报

$("ul").scrollTop($("ul").scrollTop()+2);

其中的+2可以根据间距的实际情况调整一下.
譬如+5

ruolins 2010-12-01

打赏
举报



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

    <title>无标题页</title>

    <style>

    ul{width:210px;line-height:22px;height:22px;overflow:hidden;}

    li{list-style-type:none;float:left;}

    a{color:red;}

    </style>

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

    <script>

    var tid;

    var pause=false;

    var start=function(){

       tid= setInterval(slide,10);

    }

    var slide=function(){

       if(pause) return;

       $("ul").scrollTop($("ul").scrollTop()+2);

       if($("ul").scrollTop()%22==0){

        clearInterval(tid);

        $("ul").append("<li>"+$("ul li:first").html()+"</li>");

        $("ul li:first").remove();

        $("ul").scrollTop("0");

           setTimeout(start,1000);

       }

    }

    $(document).ready(function(){

        $("ul").hover(

           function(){pause=true},

           function(){pause=false}

        );

    })

    setTimeout(start,1000);

    </script>

    

</head>

<body>    

<ul>

<li><a>F1最年轻冠军</a> <a>米兰德比对决</a></li>

<li><a>高大宽出狱</a> <a>中国作家富豪榜</a></li>

<li><a>广西列车脱轨</a> <a>京沪高铁贯通</a></li>

</ul>

</body>



</html>