JS仿marquee无缝滚动实用篇+JS随机生成字符串

JS仿marquee无缝滚动实用篇+JS随机生成字符

主要应用于预约挂号滚动等！

1. 第一种marquee直接应用

别忘了写overflow:hidden属性，这个很重要！还有如果页面不滚动，父div属性要加上position:relative

demo宽高可根据div大小随意调整！

<span style="font-size:14px;"> <div id=demo style="overflow:hidden; width:128px; height:300px;">

<div   id=demo1>

<li> <span>女士</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士1</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士2</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士3</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士4</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士5</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士6</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士7</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

<li> <span>女士8</span>   <span>无痛人流</span>  <span>三分钟前</span> </li><br/>

</div>

<div id="demo2">

</div>

</div>

<script   language="javascript">

var speed = 30;

document.getElementById('demo2').innerHTML = document.getElementById('demo1').innerHTML;

function   Marquee(){

//alert(document.getElementById('demo2').offsetTop);

//alert(document.getElementById('demo1').offsetHeight);

if(document.getElementById('demo2').offsetTop-document.getElementById('demo').scrollTop<=0){

document.getElementById('demo').scrollTop-=document.getElementById('demo1').offsetHeight;

}else{

document.getElementById('demo').scrollTop++;

}

}

var  MyMar=setInterval('Marquee()',speed);

document.getElementById('demo').onmouseover=function(){clearInterval(MyMar)};

document.getElementById('demo').onmouseout=function(){MyMar=setInterval(Marquee,speed)};

</script></span>

2.scrolltext.js 滚动JS





附上效果图，滚动中并随机生成时间，随机病种 和姓名

function ScrollText(content,btnPrevious,btnNext,autoStart)
{
this.Delay = 10;
this.LineHeight = 20;
this.Amount = 1;//娉ㄦ剰:LineHeight涓€瀹氳鑳芥暣闄mount.
this.Direction = "up";
this.Timeout = 1500;
this.ScrollContent = this.$(content);
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
//this.ScrollContent.scrollTop = 0;
if(btnNext)
{
this.NextButton = this.$(btnNext);
this.NextButton.onclick = this.GetFunction(this,"Next");
this.NextButton.onmouseover = this.GetFunction(this,"Stop");
this.NextButton.onmouseout = this.GetFunction(this,"Start");
}
if(btnPrevious)
{
this.PreviousButton = this.$(btnPrevious);
this.PreviousButton.onclick = this.GetFunction(this,"Previous");
this.PreviousButton.onmouseover = this.GetFunction(this,"Stop");
this.PreviousButton.onmouseout = this.GetFunction(this,"Start");
}
this.ScrollContent.onmouseover = this.GetFunction(this,"Stop");
this.ScrollContent.onmouseout = this.GetFunction(this,"Start");
if(autoStart)
{
this.Start();
}
}

ScrollText.prototype.$ = function(element)
{
return document.getElementById(element);
}

ScrollText.prototype.Previous = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("up");
}

ScrollText.prototype.Next = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("down");
}

ScrollText.prototype.Start = function()
{
clearTimeout(this.AutoScrollTimer);
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}

ScrollText.prototype.Stop = function()
{
clearTimeout(this.ScrollTimer);
clearTimeout(this.AutoScrollTimer);
}

ScrollText.prototype.AutoScroll = function()
{
if(this.Direction == "up")
{
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
{
this.ScrollContent.scrollTop = 0;
}
this.ScrollContent.scrollTop += this.Amount;
}
else
{
if(parseInt(this.ScrollContent.scrollTop) <= 0)
{
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
}
this.ScrollContent.scrollTop -= this.Amount;
}
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Delay);
}
else
{
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
}

ScrollText.prototype.Scroll = function(direction)
{
if(direction=="up")
{
if(this.ScrollContent.scrollTop == 0)
{
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
}
this.ScrollContent.scrollTop -= this.Amount;
}
else
{
this.ScrollContent.scrollTop += this.Amount;
}
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
{
this.ScrollContent.scrollTop = 0;
}
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Delay);
}
}

ScrollText.prototype.GetFunction = function(variable,method,param)
{
return function()
{
variable[method](param);
}
}

这个不愿意读的就直接复制好了，很好用！

<script language="javascript" type="text/javascript">
window.onload = function(){
var marquee = new ScrollText("day_yuyue");
marquee.LineHeight = 28;
marquee.Amount = 1;
marquee.Timeout = 30;
marquee.Delay = 30;
marquee.Start();}
</script>

<div class="day_yy" id="day_yuyue">

<script src="/yy.js" type="text/javascript"></script>

</div>

.day_yy {

width: 263px;
height: 133px;
overflow: hidden;
margin: 80px 50px;

}

3.yy.js

<span style="color:#000000;">name2 = new Array
name2 = new Array

time2[0] = '潘主任'
time2[1] = '潘主任'
time2[2] = '卢主任'
time2[3] = '刘主任'

name2[0] = '李'
name2[1] = '王'
name2[2] = '张'
name2[3] = '刘'
name2[4] = '陈'
name2[5] = '杨'
name2[6] = '黄'
name2[7] = '赵'
name2[8] = '吴'
name2[9] = '周'
name2[10] = '徐'
name2[11] = '孙'
name2[12] = '马'
name2[13] = '朱'
name2[14] = '胡'
name2[15] = '高'
name2[16] = '林'
name2[17] = '罗'
name2[18] = '郑'
name2[19] = '梁'
name2[20] = '谢'
name2[21] = '宋'
name2[22] = '唐'
name2[23] = '许'
name2[24] = '韩'
name2[25] = '冯'
name2[26] = '邓'
name2[27] = '曹'
name2[28] = '彭'
name2[29] = '曾'
name2[30] = '萧'
name2[31] = '田'
name2[32] = '董'
name2[33] = '袁'
name2[34] = '潘'
name2[35] = '于'
name2[36] = '蒋'
name2[37] = '蔡'
name2[38] = '余'
name2[39] = '杜'
name2[40] = '叶'
name2[41] = '程'
name2[42] = '苏'
name2[43] = '魏'
name2[44] = '吕'
name2[45] = '丁'
name2[46] = '任'
name2[47] = '沈'
name2[48] = '姚'
name2[49] = '卢'
name2[50] = '姜'
name2[51] = '崔'
name2[52] = '钟'
name2[53] = '谭'
name2[54] = '陆'
name2[55] = '汪'
name2[56] = '范'
name2[57] = '金'
name2[58] = '石'
name2[59] = '廖'
name2[60] = '贾'
name2[61] = '夏'
name2[62] = '韦'
name2[63] = '傅'
name2[64] = '方'
name2[65] = '白'
name2[66] = '邹'
name2[67] = '孟'
name2[68] = '熊'
name2[69] = '秦'
name2[70] = '邱'
name2[71] = '江'
name2[72] = '尹'
name2[73] = '薛'
name2[74] = '阎'
name2[75] = '段'
name2[76] = '雷'
name2[77] = '侯'
name2[78] = '龙'
name2[79] = '史'
name2[80] = '陶'
name2[81] = '黎'
name2[82] = '贺'
name2[83] = '顾'
name2[84] = '毛'
name2[85] = '郝'
name2[86] = '龚'
name2[87] = '邵'
name2[88] = '万'
name2[89] = '钱'
name2[90] = '严'
name2[91] = '覃'
name2[92] = '武'
name2[93] = '戴'
name2[94] = '莫'
name2[95] = '孔'
name2[96] = '向'
name2[97] = '汤'

sex2[0]='**'
sex2[1]='**'

document.write("<p class='p2'><span class='p_mz'>"+name2[parseInt(Math.random()*(97-0)+0)]+sex2[parseInt(Math.random()*(2-0)+0)]+"<\/span><span class='new1'>预约成功</span><span class='p_dz'>"+time2[parseInt(Math.random()*(10-0)+0)]+"<\/span><span class='new2'>"+parseInt(Math.random()*(60-0)+0)+"分钟前</span><\/p>");</span>

最后的document.write 别忘记多写几行！！！