- 浏览: 2271031 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴(Java网络编程精解) (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu:
拼凑,没有营养
Activiti进阶—分配组任务 -
zhangsenhao:
非常赞!代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000:
分页写得不对,应该是 : order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw:
...
SpringMVC:上传与下载 -
kingtoon:
...
XSS之xssprotect
通用不间断滚动JS封装类&省、市、地区联动选择JS封装类
官方主页: http://www.popub.net/script/MSClass.html
一 环境:XP+Myeclipse6.5+Tomcat7
二 简单示例:详见工程附件
1 文字上下滚动
2 箭头控制滚动方向、加速及鼠标拖动实例
3 省、市、地区联动选择
<
参考文档:
演示说明:http://www.popub.net/script/MSClass.html
下载地址:http://www.popub.net/script/MSClass.js
应用说明:页面包含
创建实例
//参数直接赋值法
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),应在此脚本生效后,动态设置成不显示方可生效
官方主页: 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),应在此脚本生效后,动态设置成不显示方可生效
发表评论
-
java json-lib & jQuery & jsonp
2016-06-30 11:31 771参考链接: 1、http://hanqunfeng.iteye ... -
JavaScript异步编程学习
2016-06-19 14:59 748一 JavaScript学习资源 1、Reg Braithwa ... -
jQuery图表(jqPlot,Highcharts)
2012-05-18 00:48 23509jQuery图表在http://www.oschina.net ... -
JavaScript中的arguments,callee,caller,call,appy [备忘]
2012-05-08 23:13 1562转载:JavaScript中的argume ... -
IE,FF获取文件绝对路径方法
2012-03-25 23:30 4939参考资料 1 解决Firefox3,IE7,IE8上传图片预览 ... -
My97DatePicker常用练习
2011-09-15 17:03 5082参考官网资料:http://www.m ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3769实现功能如下:参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2057业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2424页面代码如下: <inpu ... -
jQuery之DOM
2011-08-17 14:45 1437参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2074参考资料 1 jquery $(document).ready ... -
IE下调试JS的小工具-CompanionJS
2011-08-02 13:12 1859参考资料 1 推荐一个IE下调试JS的小工具-Companio ... -
Frameset导致Cookies和Session丢失的原因及解决办法
2011-07-25 12:28 4289参考资料 1 Frameset导致Cookies和Sessio ... -
js获取html元素宽度的思考
2011-04-13 17:17 2460转载: js获取html元素宽度的思考 http://blog ... -
iframe自适应,跨域,JS的document.domain
2011-04-13 17:10 4704转载:iframe自适应,跨域 ... -
MIME帮助手册
2011-04-13 17:06 1314转载:MIME帮助手册 http://www.cnblogs ... -
JS:表格排序
2011-03-24 15:09 2769参考资料 js的table排序,支持多浏览器,多列同时排序,自 ... -
JavaScript CSS Style属性对照表
2011-03-14 16:41 1410转载:JavaScript CSS Style属 ... -
国人:JSON-RPC之初识
2011-03-14 15:20 3764相关链接 1 json-rpc-for-java http:/ ... -
HTML A标记事件写法
2011-01-05 17:24 2871HTML A标记事件写法 出现状况:点击A标记事件后,整个框 ...
相关推荐
不间断滚动(js封装类,javascript,不间断,滚动,scroll)
PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.03 数据压缩完整版,包括:pcasunzip.js和PCASClass.js两个JS文件 应用说明: 页面包含[removed][removed] 省市联动 new PCAS(...
省、市、地区联动选择JS封装类.rar
MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 2.9.111214,MSClass是一款非常优秀的通用不间断滚动JS封装类,它可以广泛应用于文字、图片、图文混排等各种性质的网页滚动、幻灯图片切换、产品展示...
javascript 间断和不间断文本滚动效果
JS三级联动不间断滚动
应用说明:页面包含<script type="text/javascript" src="PCASClass.js"> 省市联动 new PCAS("Province","City") new PCAS("Province","City","吉林省") new PCAS("Province","City","吉林省","吉林市") 省市...
用JavaScript+CSS写的一款实现图片不间断滚动的效果
选择日期控件(js封装类,javascript,选择日期,文本框选择日期,控件)
一个可以代替Marquee走马灯特效的图片滚动封装类,它可控制图片做无缝循环滚动,可以在上下左右四个方面滚动,而且具备丰富自定义设置功能。它的特点: 横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊...
JS不间断向左滚动javascript无缝隙
javascript不间断文字滚动控制代码,文字从数据库中读取不间断
JavaScript开发-省/市/区 联动选择器
Javascript实现图片不间断滚动的代码_.docx
不间断滚动图片js代码。利用javascript实现,图片添加到一定条数才会不间断滚动
javascript无缝隙 JS不间断向右滚动
JavaScript 日期联动选择器