`
sungang_1120
  • 浏览: 323515 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

JQuery 单行多条信息滚动代码

阅读更多
	function T(n){
		document.getElementById("ArticleCnt").style.fontSize=n+"px";
	}
	function srcMarquee(){
		this.ID = document.getElementById(arguments[0]);

		if(!this.ID){
			this.ID = -1;
			return ;
		}

		this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.Correct = this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
		this.Step = 1;
		this.Timer = 30;

		this.DirectionArray = {"top":0 , "bottom":1 , "left":2 , "right":3};
		if(typeof arguments[1] == "number")this.Direction = arguments[1];
		if(typeof arguments[2] == "number")this.Step = arguments[2];
		if(typeof arguments[3] == "number")this.Width = arguments[3];
		if(typeof arguments[4] == "number")this.Height = arguments[4];
		if(typeof arguments[5] == "number")this.Timer = arguments[5];
		if(typeof arguments[6] == "number")this.DelayTime = arguments[6];
		if(typeof arguments[7] == "number")this.WaitTime = arguments[7];
		if(typeof arguments[8] == "number")this.ScrollStep = arguments[8];
		
		this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
		this.ID.noWrap = true;
		this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
		if(arguments.length >= 7)this.Start();
		}
		srcMarquee.prototype.Start = function(){
		if(this.ID == -1)return;
		if(this.WaitTime < 800)this.WaitTime = 800;
		if(this.Timer < 20)this.Timer = 20;
		if(this.Width == 0)this.Width = parseInt(this.ID.style.width);
		if(this.Height == 0)this.Height = parseInt(this.ID.style.height);
		if(typeof this.Direction == "string")this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()];
		this.HalfWidth = Math.round(this.Width / 2);
		this.BakStep = this.Step;
		this.ID.style.width = this.Width;
		this.ID.style.height = this.Height;
		if(typeof this.ScrollStep != "number")this.ScrollStep = this.Direction > 1 ? this.Width : this.Height;
		var msobj = this;
		var timer = this.Timer;
		var delaytime = this.DelayTime;
		var waittime = this.WaitTime;
		msobj.StartID = function(){msobj.Scroll()}
		msobj.Continue = function(){
		if(msobj.MouseOver == 1){
		setTimeout(msobj.Continue,delaytime);
		     }
		     else{ clearInterval(msobj.TimerID);
		msobj.CTL = msobj.Stop = 0;
		msobj.TimerID = setInterval(msobj.StartID,timer);
		     }
		    }
		msobj.Pause = function(){
		msobj.Stop = 1;
		clearInterval(msobj.TimerID);
		setTimeout(msobj.Continue,delaytime);
		    }
		msobj.Begin = function(){
		   msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth : msobj.ID.scrollHeight;
		   if((msobj.Direction <= 1 && msobj.ClientScroll <msobj.Height) || (msobj.Direction > 1 && msobj.ClientScroll <msobj.Width))return;
		   msobj.ID.innerHTML += msobj.ID.innerHTML;
		   msobj.TimerID = setInterval(msobj.StartID,timer);
		   if(msobj.ScrollStep < 0)return;
		   msobj.ID.onmousemove = function(event){
		       if(msobj.ScrollStep == 0 && msobj.Direction > 1){
		var event = event || window.event;
		if(window.event){
		if(msobj.IsNotOpera){msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX;}
		else{msobj.ScrollStep = null;return;}
		}
		else{msobj.EventLeft = event.layerX - msobj.ID.scrollLeft;}
		msobj.Direction = msobj.EventLeft > msobj.HalfWidth ? 3 : 2;
		msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft);
		msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfWidth);
		}};
		msobj.ID.onmouseover = function(){
		if(msobj.ScrollStep == 0)return;
		msobj.MouseOver = 1;
		clearInterval(msobj.TimerID);
		}
		msobj.ID.onmouseout = function(){
		if(msobj.ScrollStep == 0){
		if(msobj.Step == 0)msobj.Step = 1;
		return;
		}
		msobj.MouseOver = 0;
		if(msobj.Stop == 0){
		clearInterval(msobj.TimerID);
		msobj.TimerID = setInterval(msobj.StartID,timer);
		}}};
		setTimeout(msobj.Begin,waittime);
		};
		srcMarquee.prototype.Scroll = function(){
		switch(this.Direction){
		case 0:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.DelayTime > 0){
		this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL;
		this.Pause();
		return;
		}
		else{
		if(this.ID.scrollTop >= this.ClientScroll){this.ID.scrollTop -= this.ClientScroll;}
		this.ID.scrollTop += this.Step;
		}
		break;
		case 1:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.DelayTime > 0){
		this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL;
		this.Pause();
		return;
		}
		else{
		if(this.ID.scrollTop <= 0){this.ID.scrollTop += this.ClientScroll;}
		this.ID.scrollTop -= this.Step;
		}
		break;
		case 2:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.DelayTime > 0){
		this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL;
		this.Pause();
		return;
		}
		else{
		if(this.ID.scrollLeft >= this.ClientScroll){this.ID.scrollLeft -= this.ClientScroll;}
		this.ID.scrollLeft += this.Step;
		}
		break;
		case 3:
		this.CTL += this.Step;
		if(this.CTL >= this.ScrollStep && this.DelayTime > 0){
		this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL;
		this.Pause();
		return;
		}
		else{
		if(this.ID.scrollLeft <= 0){this.ID.scrollLeft += this.ClientScroll;}
		this.ID.scrollLeft -= this.Step;
		}
		break;
		}
	}

 

 

CSS

#nav {
MARGIN: 7px auto 0px; HEIGHT: 117px
}
#nav #hotnews {
BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 89px
}
#Scroll {
CLEAR: both; BORDER-RIGHT: #cdc9ca 1px solid; BORDER-TOP: #cdc9ca 1px solid; PADDING-LEFT: 100px; FONT-SIZE: 12px; BACKGROUND: url(http://mat1.qq.com/news/images/pub/2007/n_scroll.gif) no-repeat 18px 7px; MARGIN: 0px auto; BORDER-LEFT: #cdc9ca 1px solid; WIDTH: 808px; COLOR: #c2130e; LINE-HEIGHT: 27px; BORDER-BOTTOM: #cdc9ca 1px solid; HEIGHT: 27px; TEXT-ALIGN: left
}
#Scroll A {
PADDING-RIGHT: 20px; PADDING-LEFT: 10px; BACKGROUND: url(http://mat1.qq.com/news/images/pub/2007/n_bar.gif) no-repeat 0px 0px; COLOR: #000; MARGIN-RIGHT: 5px; TEXT-DECORATION: none
}
#Scroll A.s_end {
PADDING-RIGHT: 0px; MARGIN-LEFT: 8px
}

 

 

<DIV id=Scroll>
	<DIV id=ScrollMe style="OVERFLOW: hidden; HEIGHT: 27px">
		<A href="#" target=_blank>瓮安涉案女孩系溺亡</A> 
		<A href="#" target=_blank>体彩中心突发人命案</A>
	  	<A href="#" target=_blank>A股上半年全球最差</A> 
	  	<A href="#" target=_blank>上海数字电视免费开播</A>
		<A class=s_end href="#" target=_blank>五月份乘用车销量探底</A>
		
		<BR>
		
		<A href="#" target=_blank>塔罗占卜王菲会复出</A> 
		<A href="#" target=_blank>七月精彩运势全攻略</A>
		<A href="#" target=_blank>高考试题及历年分数线</A> 
		<A href="#" target=_blank>暗黑3视频图片全欣赏</A>
		<A class=s_end href="#" target=_blank>爱墙留言祈福地震灾区</A> 
		
		<BR>
	</DIV>
</DIV>

 

new srcMarquee("ScrollMe",0,1,808,27,30,3000,3000,27);

 

单行上下滚动



 

  • 大小: 37.8 KB
分享到:
评论

相关推荐

    单行jQuery循环滚动新闻代码.rar

    在网页设计中,这种效果通常用于展示最新资讯或者有限空间内的多条信息,以节省页面空间并增加动态视觉效果。 【描述解析】 "单行jQuery循环滚动新闻代码" 的描述进一步确认了这个压缩包内容是用于创建一个单一行的...

    js 单行多行滚动信息新闻

    【标题】"js 单行多行滚动信息新闻"指的是使用JavaScript实现的一种动态展示新闻信息的效果,这种效果常见于网站的新闻更新区域,通过上下滚动或左右滑动的方式,使得多条新闻信息在有限的空间内循环展示,既节省了...

    jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    单行滚动通常用于新闻标题或者公告栏,让信息逐行移动,创建一种连续滚动的效果。下面的代码示例展示了如何实现这一效果: ```html &lt;!DOCTYPE html&gt; 单行滚动示例 ul,li{margin:0;padding:0} #scrollDiv{...

    jquery 页眉单行信息滚动显示实现思路及代码

    本文讨论的是如何使用jQuery来实现页眉单行信息的滚动显示。实现这样的功能,需要结合HTML、CSS和JavaScript的知识。 首先,我们需要一个容器来放置滚动显示的信息。在这个例子中,使用了一个div元素,容器的ID被...

    单行jQuery循环滚动新闻特效代码

    【单行jQuery循环滚动新闻特效代码】是一种常见的网页动态效果,用于展示新闻更新或滚动信息。这个特效在网站上很常见,特别是在首页或者新闻栏目,它能够以紧凑且吸引人的形式展示多条新闻标题,使得用户可以快速...

    广告通知单行滚动插件BreakingNews.zip

    由于没有提供具体的标签信息,我们无法得知这个插件的更多技术细节,比如它是否基于JavaScript、jQuery或者其他前端框架,或者是与特定的CMS(内容管理系统)如WordPress或Drupal兼容。不过,通常这类插件会包含以下...

    jquery实现多行文字图片滚动效果示例代码

    7. jQuery的链式调用:jQuery支持链式调用,可以连续对一个对象执行多个操作,如`_this.css({marginTop:0})`将滚动条高度归零,继续滚动。 8. DOM操作:通过`.find("li:first")`定位到li元素,并使用`.appendTo(_...

    单向无限循环滚动

    2. **新闻资讯**:新闻网站的最新动态、热点话题,用户无需翻页即可查看多条新闻。 3. **社交媒体**:如微博、Instagram等,用户可以不断地滚动浏览新内容。 4. **广告轮播**:在首页或产品页展示广告,增加曝光率。...

    jquery滚动特效集锦

    这种效果可以在同一时间显示多条信息,为用户提供更宽的信息量。 在多行滚动效果的实现中,HTML结构和CSS样式与单行滚动类似,但多行滚动对CSS样式的要求更高,以确保多行内容能够正确地显示和滚动。例如,#...

    单排文字滚动向上.zip

    描述中提到的“通知公告经常用的滚动效果”,意味着这个代码或脚本是为了解决在有限的空间内展示多条信息的问题,尤其是当信息量较多但展示区域有限时,滚动显示可以循环播放文本内容,确保用户能看到所有信息。...

    支持多种形式的新闻滚动、跑马灯效果

    新闻滚动通常是指在一个固定的区域,如网页顶部或侧边栏,连续不断地滚动显示多条新闻标题。这种效果可以让用户在不离开当前页面的情况下,了解到最新的资讯。跑马灯效果则源自传统霓虹灯的滚动展示,它是一种文字或...

    jQuery multiple-select-master 插件

    jQuery multiple-select-master是一款基于jQuery的多选下拉框插件,它通过添加CSS样式和JavaScript功能,将传统的单行选择框转变为可滚动、可搜索、可多选的列表,使得用户能够更方便地进行多项选择。这个插件支持...

    ajax、Ztree、GridView、单行展示4条数据、金额合计

    在IT行业中,Ajax、Ztree、GridView以及单行展示多条数据和金额合计是常见的技术应用,它们在网页开发和数据展示中起着至关重要的作用。以下是对这些知识点的详细说明: 1. Ajax(Asynchronous JavaScript and XML...

    仿单行轮播(广告效果)

    仿单行轮播,通常指的是在用户界面上实现的一种类似于滚动广告的效果,它可以在一行内展示多条信息,随着时间或用户交互自动切换显示内容。这种设计常见于网站、APP等平台,用于高效地呈现多种广告、推荐内容或者...

    前端_swiper手动滑动图片、一页多图、遮罩(css+jq两种方法)、遮罩中的滚动

    在这个项目中,我们将探讨如何实现手动滑动图片、一页多图、以及添加遮罩层并进行滚动操作。同时,我们还将看到如何通过CSS和jQuery两种方法来实现遮罩层,并结合JavaScript进行交互增强。 首先,手动滑动图片是...

    详解jQuery简单的表单应用

    多行文本框应用主要关注于动态改变文本框的高度和滚动条位置。可以通过jQuery的`.height()`和`.animate()`方法实现: ```javascript $(function() { var $comment = $('#comment'); $('.bigger').click(function...

    仿excel表格,固定一列可拉动

    当内容超过容器宽度时,会出现水平滚动条,允许用户浏览更多数据。为了提供更流畅的体验,可以结合使用JavaScript和CSS的`transition`属性实现平滑滚动效果。 4. **竖向拖动**:虽然标题提到“稍微修改下布局也可以...

    bootstrap.rar

    Bootstrap提供了丰富的预定义组件,如导航条(Navbar)、按钮(Buttons)、表单(Forms)、模态框(Modals)、下拉菜单(Dropdowns)、轮播(Carousel)、提示信息(Tooltips)和警告(Alerts)等。这些组件经过精心...

    时间日期输入控件

    - 单行输入框:用户手动输入日期和时间,格式如“YYYY-MM-DD HH:MM”。 - 下拉菜单:用户点击后显示日期和时间的下拉列表进行选择。 - 日历弹窗:点击后弹出一个日历视图,用户可以滚动选择日期。 - 滑块控件:...

Global site tag (gtag.js) - Google Analytics