使用jquery及javascript实现文本滚动效果

最新推荐文章于 2025-07-24 13:50:04 发布

最新推荐文章于 2025-07-24 13:50:04 发布 · 252 阅读

文章标签：

#JavaScript #jQuery #ViewUI

web开发学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用jQuery和JavaScript实现的文本滚动效果。通过创建HTML结构，并结合jQuery的动画功能，实现了列表项的自动滚动。当鼠标悬停在滚动区域上时，滚动会暂停。

[b]使用jquery及javascript实现文本滚动效果 [/b]


<html>
	<head>
		<style type="text/css">
		.body{
			font-family: Arial, Helvetica, sans-serif, "宋体";
			font-size: 12px;
			line-height: 1.7em;
			background-color: #FFFFFF;
			background-image: url(../../image/bg.gif);
			background-repeat: repeat-x;
			background-position: top;
			margin-top: 0px;
			margin-left: 0px;
		}
        .scrollDiv {border: 1px #fff solid;width: 200px; height:192px;overflow: hidden;}
        .scrollDiv ul{height: 25px;line-height: 25px;margin: 0;padding: 0;}
        .scrollDiv li{line-height: 25px; padding-left: 5px; overflow: hidden;}
		.table {background-color: #dae8f0;border: 1px solid #99ccff;}
		.table_content {background-color: #FFFFFF;border: 1px solid #b8c4d8;}
	</style>
	</head>
	<body class="body">
		<table width="100%" border="0" cellpadding="3" cellspacing="2" class="table">
			<tr>
				<td>
					<strong>信息列表</strong>
				</td>
			</tr>
			<tr>
				<td class="table_content">
					<div id="scrollDiv" class="scrollDiv">
					</div>
				</td>
			</tr>
		</table>

		<script language=JavaScript>				
	function refreshData_gs()
	{
		var ScrollText = "";
		ScrollText += "<ul>";

	 	ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>1.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa！</label></li>";
		ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>2.bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb！</label></li>";
		ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>3.cccccccccccccccccccccccccccccccccccccccccccccccccc！</label></li>";
		ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>4.ddddddddddddddddddddddddddd！</label></li>";
		ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>5.eeeeeeeee！</label></li>";
		ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>6.ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff！</label></li>";
		ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>7.ggggggggggggggggggggggggggggggggg</li>";
		ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>8.hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh！</label></li>";


		ScrollText += "</ul>";
		document.getElementById("scrollDiv").innerHTML=ScrollText;
	}	

	function getData_GS()
	{	
		refreshData_gs();
	}

	getData_GS();						  
</script>

		<script type="text/javascript"
			src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type='text/javascript'>

	function AutoScroll(obj) {

		var lineH=$(obj).find("li:first").height();
		var upHeight=0-(lineH);
		var ulHeight =  $(obj).find("ul:first").height();
		var lines = $(obj).find("ul li").size();
		//alert("li:first height :" + lineH);
		//alert("ul:first height :" + ulHeight);

		var scrollLines = lineH;
		var scrollH = $(obj).height();
		var scrollLis = 1;
		var currLiHeight;

		//alert("scrollH :" + scrollH);
		//alert("scrollLines :" + scrollLines);

		for(var i=1;i<lines;i++){
	        var currLi = $(obj).find("ul li:eq("+i+")");
	        currLiHeight = currLi.height();

	        if((currLiHeight + scrollLines) <= scrollH){
				//alert("i :" + i + "\ncurrLiHeight :" + currLiHeight);
				scrollLines += currLiHeight;
				upHeight -= currLiHeight;
				scrollLis += 1;
	        }else{
				break;
	        }
		}
		//alert("scrollLines :" + scrollLines + "\nupHeight :" + upHeight + "\nscrollLis :" + scrollLis);

		$(obj).find("ul:first").animate(
	        {marginTop:upHeight},
	        500,
	        function () {
	            for(i = 1; i <= scrollLis; i++){
                	$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
	            }
	        }
		);
    }  

      var s = true;
      var t = 0;
      function startli() {
          if (s) t = setInterval('AutoScroll(".scrollDiv")', 3000);
      }

      $(document).ready(function () {
          startli();
          $(".scrollDiv").hover(function () {
              clearInterval(t);
              var s = false;
          }, function () {
              s= true;
              startli();
          });
      })
  </script>
	</body>
</html>