`

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

分享到:
评论

相关推荐

    卷料回转库sw20可编辑_三维3D设计图纸_三维3D设计图纸.zip

    卷料回转库sw20可编辑_三维3D设计图纸_三维3D设计图纸.zip

    前端分析-2023071100789s+7

    前端分析-2023071100789s+7

    电磁场仿真:瞬态电磁场仿真.zip

    电磁领域系列仿真模拟教程,每个包10几个教程,从基础到精通,案例多多。

    嵌入式开发中ADC数据采集的多种软件滤波算法及其STM32工程应用

    内容概要:本文详细介绍了嵌入式开发中常用的几种软件滤波算法,旨在解决ADC采集数据中的误差问题。文中首先解释了限幅滤波、中位值滤波、递推平均滤波、一阶滞后滤波以及消抖滤波的基本原理和应用场景,并提供了相应的C语言代码实现。接着讨论了这些算法在实际项目中的优化技巧,如使用环形缓冲区、DMA传输、Q格式定点数运算等。最后强调了根据不同场景选择合适的滤波算法组合的重要性。 适合人群:从事嵌入式系统开发的技术人员,尤其是那些需要处理ADC采集数据的工程师。 使用场景及目标:适用于各类嵌入式系统的数据采集模块,特别是面对传感器数据不稳定的情况。目标是在不改变硬件的前提下,通过软件手段提高数据的可靠性和准确性。 其他说明:文章不仅提供了理论知识,还分享了许多实践经验,帮助读者更好地理解和应用这些滤波算法。同时提醒开发者要注意硬件层面的噪声处理,不要过分依赖软件滤波。

    光伏混合储能VSG并网仿真模型:解析VSG控制与储能协同优化

    内容概要:本文详细介绍了光伏混合储能系统的虚拟同步发电机(VSG)并网仿真模型。该系统由VSG控制模块、光伏PV模块、蓄电池以及超级电容组成。VSG通过有功-频率环和无功-电压环进行精确控制,确保系统稳定运行。光伏模块采用MPPT扰动观察法跟踪最大功率点,蓄电池提供稳定的恒功率输出,超级电容则用于快速响应瞬态负载变化。文中展示了各个模块的核心代码逻辑及其在仿真环境中的表现,强调了参数整定对系统性能的影响。 适合人群:电力电子工程师、新能源研究人员、仿真建模专家。 使用场景及目标:适用于研究光伏混合储能系统的并网控制策略,优化储能设备的协同工作,提高系统的稳定性和响应速度。目标是通过仿真验证系统在各种工况下的性能,为实际应用提供理论支持和技术指导。 其他说明:文章提供了丰富的代码片段和仿真案例,帮助读者深入理解各模块的工作原理和相互关系。同时,作者分享了许多调试经验和常见错误,有助于新手更快掌握相关技术。

    (河南)土木工程毕业实习报告(高层住宅小区).doc

    (河南)土木工程毕业实习报告(高层住宅小区).doc

    电子烟多芯支架装配sw20可编辑_三维3D设计图纸_三维3D设计图纸.zip

    电子烟多芯支架装配sw20可编辑_三维3D设计图纸_三维3D设计图纸.zip

    大学毕业生土木工程毕业实习报告范文3000字(范本).doc

    大学毕业生土木工程毕业实习报告范文3000字(范本).doc

    一个纯原生JavaScript实现的轮播图,使用了面向对象的方式实现

    一个纯原生JavaScript实现的轮播图,使用了面向对象的方式实现。 如果你想锻炼自己的编码能力,可以尝试实现这样的一个轮播图。 如果你想在项目中使用,也是一个不错的选择,当然记得将缺少的图标素材补充完整。 如果你在一个页面上需要用到多个轮播图,那更应该使用它了。

    前端开发Vue框架安装与环境配置指南:涵盖Node.js、Vue CLI及项目创建运行全过程

    内容概要:本文详细介绍了 Vue.js 的安装及环境配置流程。首先强调了 Vue.js 作为渐进式 JavaScript 框架的特点,然后逐步讲解了安装 Node.js 和 Vue CLI 的步骤,包括下载、安装和版本检查。接着,演示了如何使用 Vue CLI 创建新项目,并介绍了项目创建后的运行方法。最后,简述了如何在 Vue 项目中安装常用的第三方依赖,如 Axios、Vue Router 和 Vuex,为后续开发做好准备。; 适合人群:对前端开发感兴趣的初学者或有一定 JavaScript 基础的开发者。; 使用场景及目标:①掌握 Vue.js 的安装和环境配置;②学会使用 Vue CLI 创建和运行 Vue 项目;③了解如何在 Vue 项目中安装和使用常用第三方依赖。; 阅读建议:按照文档步骤依次操作,确保每一步都正确无误,特别是 Node.js 和 Vue CLI 的安装与版本检查。在创建和运行项目时,注意终端输出的信息,遇到问题及时查阅官方文档或社区资源。

    电磁场仿真:电磁波传播仿真.zip

    电磁领域系列仿真模拟教程,每个包10几个教程,从基础到精通,案例多多。

    STM32-宿舍语音助手.zip

    STM32-宿舍语音助手.zip

    Xilinx FPGA千兆以太网与DDR4内存读写测试:基于KCU105/KC705平台的LWIP通信及DDR4读写工程代码

    内容概要:本文详细介绍了基于Xilinx KCU105/KC705平台的千兆以太网与DDR4内存读写测试工程代码。首先,文章讲解了LWIP轻量级TCP/IP协议栈的实现,包括网络接口初始化、内存池配置等。其次,探讨了DDR4内存控制器的设计,涵盖VHDL代码示例及其工作原理。最后,文章讨论了如何将这两部分整合到一个完整的工程项目中,解决了时钟域同步、资源分配和接口适配等问题,并展示了性能测试结果。 适合人群:从事FPGA开发的技术人员,尤其是关注高速数据处理和网络通信领域的工程师。 使用场景及目标:适用于需要实现高速数据传输和存储的应用场景,如实时数据采集、信号处理等。目标是掌握千兆以太网通信和DDR4内存读写的实现方法,提高系统的数据处理能力和稳定性。 其他说明:文中提供的代码片段和调试技巧有助于开发者快速上手并解决问题。此外,作者分享了许多实践经验,如PHY芯片配置、AXI总线优化等,对于初学者和有一定经验的开发者都有很大帮助。

    电大土木工程专业毕业论文31774.doc

    电大土木工程专业毕业论文31774.doc

    镍氢电池智能检测生产线sw17可编辑_三维3D设计图纸_三维3D设计图纸.zip

    镍氢电池智能检测生产线sw17可编辑_三维3D设计图纸_三维3D设计图纸.zip

    光伏储能充电Simulink仿真模型:详解恒流恒压及两阶段充电模式

    内容概要:本文详细介绍了基于Simulink平台构建的光伏储能充电仿真模型,涵盖了光伏发电模块、锂电池模型和充电控制策略的设计与实现。文中首先描述了整体架构,包括带MPPT的Boost电路用于光伏发电,二阶RC等效电路用于电池建模,以及充电控制模块中的三种充电模式(恒流、恒压、两阶段混合)及其切换逻辑。接着,作者分享了调试过程中遇到的一些常见问题及解决方案,如RC参数匹配不当引起的震荡、充电模式切换时的电流冲击、光伏输出与电池电压不匹配等问题。最后,通过对不同充电模式的仿真结果进行对比分析,展示了两阶段混合模式在充电效率和稳定性方面的优势。 适合人群:从事光伏储能系统研究与开发的技术人员,尤其是对Simulink仿真工具有一定基础的研究人员。 使用场景及目标:适用于希望深入了解光伏储能系统内部工作原理和技术细节的专业人士,旨在帮助他们掌握如何利用Simulink搭建高效稳定的充电控制系统,优化系统性能。 其他说明:文中提供了详细的参数设置指南和调试技巧,有助于读者快速上手并成功复现实验结果。同时,作者还分享了一些未公开的小技巧和隐藏功能,增加了模型的趣味性和实用性。

    前端分析-2023071100789s+12

    前端分析-2023071100789s+12

    电磁仿真:电磁场基础理论.zip

    电磁领域系列仿真模拟教程,每个包10几个教程,从基础到精通,案例多多。

    基于SSM的银行账目管理系统设计与实现.docx

    基于SSM的银行账目管理系统设计与实现.docx

    电磁场基础:电磁场的数值方法.zip

    电磁领域系列仿真模拟教程,每个包10几个教程,从基础到精通,案例多多。

Global site tag (gtag.js) - Google Analytics