施用jquery及javascript实现文本滚动效果-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20301 次

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

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>