本文实例讲述了基于Marquee.js插件实现的跑马灯效果。分享给大家供大家参考，具体如下：
1、Marquee.js文件
1 ? this.Width : this.Height;
var templateLeft = "
MSCLASS_TEMP_HTMLMSCLASS_TEMP_HTML 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;
}
}
2、脚本调用
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...
