Web_JavaScript_滚动模块；
来源：互联网 发布：淘宝 机油之家 编辑：程序博客网 时间：2024/06/10 22:13
入口：使元素滚动，就是这么简单；
效果：
代码：
=>RollModule.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbb" /> <title>滚动模块</title><script type="text/javascript">/* 向上滚动 */<!--/***********创建实例://参数直接赋值法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向上滚动) 可设置的值包括:0,1,2,3,"top","bottom","left","right" (0向上 1向下 2向左 3向右)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禁止鼠标控制)***********/function Marquee() {this.ID = document.getElementById(arguments[0]);if (!this.ID) {alert("您要设置的\"" + arguments[0] + "\"初始化错误\r\n请检查标签ID设置是否正确!");this.ID = -1;return;}this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop = this.MouseOver = 0;this.Step = 1;this.Timer = 30;this.DirectionArray = {"top": 0,"up": 0,"bottom": 1,"down": 1,"left": 2,"right": 3};if (typeof arguments[1] == "number" || typeof arguments[1] == "string") 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();}Marquee.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.HalfHeight = Math.round(this.Height / 2);this.BakStep = this.Step;this.ID.style.width = this.Width + "px";this.ID.style.height = this.Height + "px";if (typeof this.ScrollStep != "number") this.ScrollStep = this.Direction > 1 ? this.Width : this.Height;var templateLeft = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>";var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>";var msobj = this;msobj.tempHTML = msobj.ID.innerHTML;if (msobj.Direction <= 1) {msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g, msobj.ID.innerHTML);} else {if (msobj.ScrollStep == 0 && msobj.DelayTime == 0) {msobj.ID.innerHTML += msobj.ID.innerHTML;} else {msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g, msobj.ID.innerHTML);}}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 / 2 : msobj.ID.scrollHeight / 2;if ((msobj.Direction <= 1 && msobj.ClientScroll <= msobj.Height + msobj.Step) || (msobj.Direction > 1 && msobj.ClientScroll <= msobj.Width + msobj.Step)) {msobj.ID.innerHTML = msobj.tempHTML;delete(msobj.tempHTML);return;}delete(msobj.tempHTML);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);}Marquee.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;}}</script><style type="text/css">ul{padding: 0px;margin: 0px;}</style></head><body><div id="rolldiv"><ul><li>滚动内容1</li><li>滚动内容2</li><li>滚动内容3</li><li>滚动内容4</li><li>滚动内容5</li><li>滚动内容6</li><li>滚动内容7</li><li>滚动内容8</li><li>滚动内容9</li><li>滚动内容10</li><li>滚动内容11</li><li>滚动内容12</li></ul></div><script >new Marquee("rolldiv",0,1,227,180,30,0,500); </script></body></html> 0 0
- Web_JavaScript_滚动模块；
- Web_JavaScript_列表元素滚动；
- Web_JavaScript_头部隐现模块；
- Web_JavaScript_客户端监测；
- Web_JavaScript_广告挂载；
- 滚动新闻（企业动态）模块
- Web_JavaScript_去除JS字串两边空格；
- javascript控制模块滚动到特定位置
- scrollView滚动视图实现商城模块
- Web_JavaScript_页面多个window.onload需求问题解决；
- iOS开发---轮播图模块（连续循环滚动版）
- 学习--jquery 自定义插件 页面按照模块 垂直滚动
- js函数——倒计时模块+无缝滚动
- JQuery点击锚点滚动到相应的模块
- 类似QQ2013联系人模块listview上下滚动与左右滑动item间模块切换
- 滚动
- 滚动
- 滚动
- 基于Java的全文检索插件——Lucene
- FZU 2112【Tickets】
- 发送的广播不能被接收
- JAVA之Vector详解
- 【leetcode with java】18 4Sum O(n^2)
- Web_JavaScript_滚动模块；
- 怎样在windows上设置svn服务器
- error: stray ‘\357’ in program
- BitmapUtils构造函数和一些常用方法整理
- 异常，包，多线程
- 百度转码 手机端 注入cookie webview 操作
- PHP 处理 Oracle 中的Clob类型
- Mondrian 使用教程
- Mysql Not in的问题
