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

ouanui

浏览: 48166 次
性别:
来自: 深圳

最近访客更多访客>>

tanghui

Goden

maenlai10086

starbhhc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web开发学习笔记

JavaScript jQuery

使用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("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>

分享到：

支持IE及FIRFOX 添加连接到收藏夹的简易操 ... | velocity中使用jquery出现的问题

2011-07-15 17:22
浏览 1513
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

JFreeChart 学习（2）-struts2+maven3

strusts2.0+servlet

JFreeChart 学习（1）-获取图片

js 计算特殊字符CRLF

linux 下 jboss7的安装

maven 体验

eclise导入已存在工程报 Faceted Project Problem 错误

eclipse3.6 在 tomcat6上部署web应用

eclipse 之 scrapbook

eclipse添加findbugs plugin

eclipse添加打开文件夹资源快捷方式

支持IE及FIRFOX 添加连接到收藏夹的简易操作

eclipse3.2.2 整合 weblogic81

修改eclipse启动jdk版本

velocity中使用jquery出现的问题

Ajax学习笔记（一）

jquery学习笔记（一）

log4j学习笔记（二）

log4j学习笔记（一）

Input的readonly 属性与disabled属性

最近访客更多访客>>