`

Javascript:通用不间断滚动&省、市、地区联动选择JS封装类

阅读更多
通用不间断滚动JS封装类&省、市、地区联动选择JS封装类
官方主页: http://www.popub.net/script/MSClass.html
一 环境:XP+Myeclipse6.5+Tomcat7
二 简单示例:详见工程附件
1 文字上下滚动
<style type="text/css">
		body,div{margin:0;font-size:12px}
		td.data{font-size: 12px;line-height: 20px;color: #666}		
		#context{
				width: 500px;
				height: 300px;		
				margin-top:10%;
				margin-left:30%;		
				font-size:13px; 
				color:#003c79;
				background:#f4f5f9; 
				border:solid 1px #d0d6e9;
		}		
	</style>
    <script type="text/javascript" src="scripts/MSClass.js" charset="gb2312"></script>
    <script type="text/javascript" charset="gbk">
	      window.onload = function(){
	       new Marquee("context",-1,1,600,400,50,5000,1000,290);
		}
	</script>


<div id="context">
         <table>
			<tr>
				<td class="data">
				<p>     
...
</p>
		</td>
	   </tr>	   
	  </table>
      </div>


2 箭头控制滚动方向、加速及鼠标拖动实例

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<td><a href="javascript:void(0);" id="LeftButton2" hidefocus><img src="images/right.gif"  border="0"></a></td>
<td width="10"></td>
<td valign="top" width="477">
	<div ID="MarqueeDiv2" style="width:477px;overflow:hidden;">
	    <TABLE style="WIDTH:800px; BORDER-COLLAPSE: collapse;display:inline;" cellSpacing=0 cellPadding=0 align=center border=0>
		<TBODY>
		<TR>
			<TD width="160" align="center" height="145">
				<A href="javascript:void(0)"><IMG src="images/1.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接1</A> 
			</TD>
			<TD width="160" align="center">
				<A href="javascript:void(0)"><IMG src="images/2.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接2</A> 
			</TD>
			<TD width="160" align="center">
				<A href="javascript:void(0)"><IMG src="images/3.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接3</A> 
			</TD>
			<TD width="160" align="center">
				<A href="javascript:void(0)"><IMG src="images/4.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接4</A> 
			</TD>
			<TD width="160" align="center">
				<A href="javascript:void(0)"><IMG src="images/5.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接5</A> 
			</TD>
			<TD width="160" align="center">
				<A href="javascript:void(0)"><IMG src="images/6.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接6</A> 
			</TD>
			<TD width="160" align="center">
				<A href="javascript:void(0)"><IMG src="images/7.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接7</A> 
			</TD>
			<TD width="160" align="center">
				<A href="javascript:void(0)"><IMG src="images/8.jpg" border=0 width="150" height="120"></A><br/>
				<A href="javascript:void(0)">链接8</A> 
			</TD>
		</TR>
		</TBODY>
		</TABLE>
	</div>
</td>
<td width="10"></td>
<td><a href="javascript:void(0);" id="RightButton2" hidefocus><img src="images/left.gif" border="0"></a></td></tr>
</table>


<script defer>
function $(id){return document.getElementById(id)};

/*********箭头控制滚动方向、加速及鼠标拖动***************/
var MarqueeDiv2Control=new Marquee("MarqueeDiv2");	//箭头控制滚动方向、加速及鼠标拖动实例
MarqueeDiv2Control.Direction="left";
MarqueeDiv2Control.Step=1;
MarqueeDiv2Control.Width=477;
MarqueeDiv2Control.Height=145;
MarqueeDiv2Control.Timer=20;
MarqueeDiv2Control.ScrollStep=1;//若为-1则禁止鼠标控制实例
MarqueeDiv2Control.Start();
$("LeftButton2").onmouseover=function(){MarqueeDiv2Control.Direction=2};
$("LeftButton2").onmouseout=$("LeftButton2").onmouseup=function(){MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep};
$("LeftButton2").onmousedown=$("RightButton2").onmousedown=function(){MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep+3};
$("RightButton2").onmouseover=function(){MarqueeDiv2Control.Direction=3};
$("RightButton2").onmouseout=$("RightButton2").onmouseup=function(){MarqueeDiv2Control.Step=MarqueeDiv2Control.BakStep};
</script>


3 省、市、地区联动选择

<
style type="text/css">
		a,body,select{font-size:12px;text-decoration:none;}
		a,pre{color:#808080;}
		body{background:#efefef;}
	</style>
<script type="text/javascript" src="scripts/PCASClass.js" charset="gb2312"></script>    


<fieldset style="padding:5px;">
<legend>省市联动</legend>
出生地:<select name="P1"></select><select name="C1"></select><br>
所在地:<select name="P2"></select><select name="C2"></select><br>
工作地:<select name="P3"></select><select name="C3"></select><br>
</fieldset>
<br><br>
<fieldset style="padding:5px;">
<legend>省市地区联动</legend>
出   生  地:<select name="province"></select><select name="city"></select><select name="area"></select><br>
户 口 所 在 地:<select name="province1"></select><select name="city1"></select><select name="area1"></select><br>
工 作 所 在 地:<select name="province2"></select><select name="city2"></select><select name="area2"></select><br>
<br>
无  默  认:<select name="province3"></select><select name="city3"></select><select name="area3"></select><br>
默  认  省:<select name="province4"></select><select name="city4"></select><select name="area4"></select><br>
默 认 省 市:<select name="province5"></select><select name="city5"></select><select name="area5"></select><br>
默 认 省 市 区:<select name="province6"></select><select name="city6"></select><select name="area6"></select><br>
</fieldset>


<script language="javascript">
new PCAS("P1","C1");
new PCAS("P2","C2","吉林省");
new PCAS("P3","C3","江苏省","苏州市");
new PCAS("province","city","area","吉林省","白城市","大安市");
new PCAS("province1","city1","area1","吉林省","吉林市","龙潭区");
new PCAS("province2","city2","area2","江苏省","苏州市","沧浪区");
new PCAS("province3","city3","area3");
new PCAS("province4","city4","area4","江苏省");
new PCAS("province5","city5","area5","江苏省","苏州市");
new PCAS("province6","city6","area6","江苏省","苏州市","沧浪区");
</script>


参考文档:
演示说明:http://www.popub.net/script/MSClass.html
下载地址:http://www.popub.net/script/MSClass.js
应用说明:页面包含
<script type="text/javascript" src="MSClass.js" charset="gb2312"></script> 
 
创建实例
//参数直接赋值法
new Marquee("marquee")
new Marquee("marquee","top")
  ......
new Marquee("marquee",0,1,760,52)
new Marquee("marquee","top",1,760,52,50,5000)
  ......
new Marquee("marquee",0,1,760,104,50,5000,3000,52)
new Marquee("marquee",null,null,760,104,null,5000,null,-1)

//参数动态赋值法
var Marquee1 = new Marquee("marquee") *此参数必选
Marquee1.Direction = "top"; 或者 Marquee1.Direction = 0;
Marquee1.Step = 1;
Marquee1.Width = 760;
Marquee1.Height = 52;
Marquee1.Timer = 50;
Marquee1.DelayTime = 5000;
Marquee1.WaitTime = 3000;
Marquee1.ScrollStep = 52;
Marquee1.Start();
  
参数说明
ID "marquee" 容器ID (必选)
Direction (0) 滚动方向 (可选,默认为0向上滚动) 值:-1,0,1,2,3,4(0上 1下 2左 3右 -1上下交替 4左右交替)
Step     (1)    滚动的步长    (可选,默认值为2,数值越大,滚动越快)
Width    (760)   容器可视宽度   (可选,默认值为容器初始设置的宽度)
Height    (52)    容器可视高度   (可选,默认值为容器初始设置的高度)
Timer    (50)    定时器      (可选,默认值为30,数值越小,滚动的速度越快,1000=1秒,建议不小于20)
DelayTime  (5000)   间歇停顿延迟时间 (可选,默认为0不停顿,1000=1秒)
WaitTime   (3000)   开始时的等待时间 (可选,默认或0为不等待,1000=1秒)
ScrollStep  (52)    间歇滚动间距   (可选,默认为翻屏宽/高度,该数值与延迟均为0则为鼠标悬停控制,-1禁止鼠标控制)

使用建议
1、建议直接赋予容器的显示区域的宽度和高度,如(<div id="marquee" style="width:760px;height:52px;">......</div>)
2、建议为容器添加样式overflow = auto,如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">......</div>)
3、为了更准确的获取滚动区域的宽度和高度,请尽可能将各滚动单位直接赋予正确宽高度
4、对于TABLE标记的横向滚动,需要对TABLE添加样式display = inline,如(
        <div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>)
5、对于翻屏滚动或间歇滚动,要注意各滚动单位间的间距,同时需要对容器的可视高度和可视宽度做好准确的设置,对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整
6、若对于UL、LI自动换行的样式设置问题上存在困难,建议将其转换成表格(TABLE)的形式来达到同等的效果
7、针对横向滚动的文字段落,如果最末端是以空格" "结束的,请将空格" "转换成" "
8、鼠标悬停滚动思想源自Flash,所以有一定的局限性(容器内仅允许用图片<img>或者带链接的图片<img>的形式,并需要禁止其自动换行)
9、此JS文档为ANSI编码格式,若用户的页面为UTF-8编码格式,建议对引用脚本标签加入charset="gb2312"的属性,或者将js文档以UTF-8的编码格式另外存储
10、若用户有隐藏区域的应用(display=none),应在此脚本生效后,动态设置成不显示方可生效
分享到:
评论

相关推荐

    通用不间断滚动JS封装类

    标题 "通用不间断滚动JS封装类" 提供了一个关键线索,那就是关于JavaScript的封装技术,特别是针对不间断滚动效果的实现。这种效果通常用于新闻滚动、广告轮播或任何需要连续滚动内容的网页元素。封装类是一种将功能...

    不间断滚动(js封装类,javascript,不间断,滚动,scroll)

    不间断滚动(js封装类,javascript,不间断,滚动,scroll)

    Marquee Scroll通用不间断滚动JS封装类

    Marquee Scroll通用不间断滚动JS封装类是一种常见的JavaScript技术,用于实现网页元素的自动滚动效果,常见于新闻滚动、公告栏等场景。这类封装类的主要目的是简化开发者的工作,提供一种便捷的方式来实现不同方向...

    省、市、地区联动选择JS封装类)例子

    在压缩包中的"省、市、地区联动选择JS封装类)"文件中,你可以找到具体的实现代码,通过阅读和理解代码,你将能更好地掌握这个功能的实现原理。记得将这个类应用到你的项目中时,要确保它符合你的具体需求,并进行...

    推荐通用文字图片JS不间断滚动封装类 代替Marquee

    标题提到的"推荐通用文字图片JS不间断滚动封装类 代替Marquee",就是一种利用JavaScript实现的动态效果,它旨在为文字和图片提供一种类似传统的Marquee(滚动条)效果,但更加灵活且易于使用的解决方案。Marquee是...

    省、市、地区联动选择JS封装类

    "省、市、地区联动选择JS封装类"是专门解决这个问题的JavaScript代码库,它的主要目的是简化开发流程,减少程序员编写此类功能所需的时间。 JS封装类通常包含一系列预定义的方法和属性,以一个易于使用的接口提供...

    MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类)

    **MSClass - 通用不间断滚动JS封装类** 在网页设计中,滚动效果是常见的动态元素,可以用于展示图片、文字等内容。MSClass 是一个专门针对此类需求开发的JavaScript类,它实现了通用的不间断滚动功能,适用于多种...

    MSClass Class Of Marquee Scroll通用不间断滚动JS封装

    本文将详细讨论“MSClass Class Of Marquee Scroll通用不间断滚动JS封装”这一主题,这是一种利用JavaScript实现的滚动效果,旨在为网页元素提供无缝、连续的滚动动画。 一、Marquee效果简介 Marquee效果源自HTML4...

    /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\

    《MSClass:构建高效不间断滚动效果的JS封装类》 在网页设计中,动态滚动效果是一种常见的视觉表现手法,能够吸引用户的注意力并增加交互性。本文将深入探讨一个名为"MSClass"的JavaScript封装类,它专为实现各种...

    MSClass Class Of Marquee Scroll通用不间断滚动JS封装.zip

    标题中的"MSClass Class Of Marquee Scroll通用不间断滚动JS封装.zip"表明这是一个使用JavaScript实现的通用无缝滚动效果的代码库,特别适用于网页中的文本或图片滚动展示。这种滚动效果常见于新闻网站、广告横幅等...

    比较好用_js地区联动与连续滚动_javascript地区联动与连续滚动

    标题中的“比较好用_js地区联动与连续滚动_javascript地区联动与连续滚动”表明这是一个关于JavaScript实现的地区联动和连续滚动效果的技术分享。地区联动通常指的是在网页中选择一个地区(如省份)时,下方的下拉...

    通用的JS滚动封装类!能够满足你所有的滚动开发需求!

    JavaScript滚动封装类是一种高效、灵活的工具,它允许开发者轻松实现网页中的滚动效果,无论是横滚还是竖滚,甚至不间断滚动。在这个特定的案例中,我们讨论的是名为"MSClass"的JavaScript类,专为Marquee(跑马灯)...

    再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

    MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6) 是一个JavaScript类,用于实现网页中的不间断滚动效果。这个类是经过多次更新和优化的版本,最初发布于2006年8月31日,最新更新在2007年1月31日,...

    JS省市地区联动(PCAS)

    在网页开发中,"JS省市地区联动(PCAS)"是一种常见的交互功能,它使得用户在选择省份时,下方的城市和区县会自动更新为与所选省份相关的选项。这种功能提高了用户输入的效率和准确性,尤其适用于需要填写详细地址的...

    PCAS(省市县联动选择JS封装类) v2.03 数据压缩完整版.rar

    PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.03 数据压缩完整版,包括:pcasunzip.js和PCASClass.js两个JS文件 应用说明: 页面包含[removed][removed] 省市联动 new PCAS(...

    JavaScript仿京东城市地区选择器3级联动菜单,适用于电商购物网站。兼容主流浏览器

    JavaScript仿京东城市地区选择器是一种常见的前端功能,用于在电商购物网站中实现用户选择收货地址的便捷方式。这个3级联动菜单设计旨在提供一种高效、直观的用户体验,让用户能够快速定位到他们所在的省份、城市和...

    javascript效果源码\向左不间断(无缝)滚动图片js代码

    在本资源中,我们关注的是一个特定的JavaScript效果——向左不间断(无缝)滚动图片的实现。这个效果通常用于网站的轮播图或者产品展示区域,它可以连续不断地将图片从左侧滑入视区,给人一种连续、流畅的视觉体验。...

    js实现移动端省市区三级联动选择器效果

    在移动端开发中,省市区三级联动选择器是一个常见的功能,用于收集用户所在的地理位置信息。它通常出现在注册、地址填写等场景中,用户依次选择省份、城市和区县,这三个选项之间存在联动关系,即选择一个省份后,...

Global site tag (gtag.js) - Google Analytics