`

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

分享到:
评论

相关推荐

    jQuery-实现文字无缝滚动效果.zip

    这个例子展示了如何使用jQuery实现文字无缝滚动效果的基本步骤和关键代码。实际应用中,你可以根据需要调整滚动速度、文字内容和样式。理解并掌握这些知识点,将有助于你在网页开发中创建更多吸引人的动态效果。

    使用jQuery实现文本滚动.rar

    在这个名为"使用jQuery实现文本滚动.rar"的压缩包中,包含了一个名为"myslideup.js"的jQuery插件,专门用于实现文字滚动效果。 首先,我们要理解jQuery的基本概念。jQuery是由John Resig在2006年创建的,它的核心...

    jquery文本单行多行滚动特效

    它们可能包含了用于展示文本滚动效果的HTML结构、CSS样式和jQuery代码。 - **jquery.js**:这是jQuery的核心库文件,它包含了实现所有jQuery功能的JavaScript代码。在HTML文件中引入这个文件,我们就能使用jQuery...

    文本垂直无滚动条滚动(jquery)

    为了实现无滚动条的垂直滚动效果,我们可以使用CSS来隐藏默认的滚动条: ```css #scrolling-text { overflow-y: scroll; scrollbar-width: none; /* 针对Firefox */ -ms-overflow-style: none; /* 针对IE和Edge *...

    jquery 文字向上滚动

    7. **js**:这个目录可能包含了所有必要的JavaScript文件,包括jQuery库本身以及实现文字滚动效果的自定义脚本。 在实现jQuery文字向上滚动时,主要涉及的技术点可能包括: 1. **DOM操作**:jQuery提供了一系列方便...

    一个jquery广告文字上下滚动效果

    标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效,常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力,增加信息的可见性...

    JQuery插件Marqueejs实现无缝滚动效果.docx

    Marquee.js 是一个基于 JQuery 的插件,它能够帮助开发者轻松地在网页上实现文本或其他元素的无缝滚动效果。这种效果常见于新闻网站或者广告轮播场景,通过平滑且连续的滚动,提升用户体验并吸引用户的注意力。 ###...

    jQuery实现滚动效果

    jQuery作为一个强大的JavaScript库,因其简洁的API和丰富的功能,被广泛用于实现各种交互效果,包括标题中提到的“jQuery实现滚动效果”。这种效果主要分为两类:轮播效果和上下文字滚动效果。 首先,我们来详细...

    html+css+javascript实现歌词滚动效果

    在这个项目中,我们将探讨如何利用这三者来实现一个歌词滚动效果,就像许多音乐播放器中常见的那样。当歌曲播放时,歌词会按照时间轴滚动,并在当前播放的歌词上进行高亮和放大处理,确保其始终居中显示。 首先,...

    jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐

    这个例子展示了如何使用jQuery实现单行文字的上下循环滚动效果。根据实际需求,可以进一步优化和调整滚动速度、过渡效果等参数,以达到最佳的视觉体验。同时,通过结合ECMAScript(JavaScript的基础)和CSS3的特性,...

    jQuery左右滚动效果(带停顿)

    "jQuery左右滚动效果(带停顿)"是一种常见的网页交互设计,它允许用户通过鼠标悬停或点击来浏览一串水平排列的内容,如图片、文本或者产品展示。这个效果利用了jQuery库的强大功能,使得滚动过程平滑且具有可控制的...

    jquery实现自动滚动

    ### 使用jQuery实现自动滚动效果 在现代Web开发中,动态元素和交互式用户界面变得越来越重要。其中之一就是自动滚动效果,这种效果常用于新闻站点、博客或者电子商务网站中展示最新的文章或产品信息。本文将详细...

    推荐20款基于 jQuery & CSS 的文本效果插件

    9. ScrollMagic:配合TweenMax库,实现根据滚动位置改变文本属性的高级动画效果。 10. TextRotator:循环显示一组文本,如标语或口号,可设置旋转方式(旋转、淡入淡出等)。 11. Hover.css:包含大量预设的CSS...

    jquery-scrollable.js 滚动 文本滚动

    `jQuery Scrollable` 是一个功能强大且高度自定义的插件,专门设计用于在网页上实现流畅的滚动效果。它适用于各种内容类型,包括HTML文本、图像、视频和文件等,使得这些元素能够在用户界面中以水平或垂直方向平滑...

    jQuery横向图片焦点图滚动效果,标题有打字机效果,兼容主流浏览器

    此外,由于jQuery已经对大部分浏览器进行了兼容性处理,因此使用jQuery实现的图片滚动效果可以很好地在各种主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上运行。 【标题打字机效果】是另一种增强用户体验的...

    jQuery实现的文字无缝上下滚动效果源码.zip

    在这个名为"jQuery实现的文字无缝上下滚动效果源码.zip"的压缩包中,包含了一个利用jQuery实现的文字滚动效果的源代码示例。 文字无缝上下滚动是一种常见的网页动态效果,常用于新闻更新、公告展示或者页面简介等...

    jQuery网页背景视觉差滚动效果

    **jQuery网页背景视觉差滚动效果**是一种常见的网页设计技术,旨在增强用户体验,通过创造一种立体感和动态感,使网站更具吸引力。这种效果是通过在用户滚动页面时,让背景图像以不同的速度移动,与前景元素(如文本...

    jQuery实现数字滚动

    至于压缩包中的"数字滚动效果"文件,可能包含了实现这些实例的HTML、CSS和JavaScript代码。分析这些代码,我们可以学习到具体的实现方式,包括如何绑定事件、如何设置动画参数以及如何控制滚动的节奏。这对于我们...

    纯javascript实现四方向文本无缝滚动效果

    尽管目标是使用“纯JavaScript”实现滚动效果,但在许多实际应用中,还是会借助jQuery等库来提高开发效率。虽然可以不使用jQuery而只用纯JavaScript实现,但那样可能会使代码更加冗长和复杂。 知识点六:性能优化 ...

    JavaScript实现公告栏上下滚动效果

    本文将详细介绍如何使用JavaScript和jQuery来实现公告栏内容的自动滚动效果。 首先,我们需要理解公告栏滚动效果的基本原理。在给定文件示例中,公告栏的滚动效果是通过动态修改HTML元素CSS属性(如`marginTop`)来...

Global site tag (gtag.js) - Google Analytics