两种滚动跑马灯效果-从当前位置开始

来源：互联网发布：肯特大学知乎编辑：程序博客网时间：2024/05/01 11:48

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>左右无间断滚动效果，wj整理收集。</title>

function marqpuee(){

vars1=document.getElementById("div1");

vars2=document.getElementById("div2");

vars3=document.getElementById("div3");

vars4=document.getElementById("div4");

s4.style.width=(s2.offsetWidth*2)+"px";

s3.innerHTML=s2.innerHTML;

if(s2.offsetWidth<=s1.scrollLeft){

s1.scrollLeft-=s2.offsetWidth;

}else{

s1.scrollLeft++;

}

var MyMmar=setInterval(marqpuee,20)

</script>

</head>

<body>

<spanid="div1"style="width:auto;height:auto;overflow:hidden;white-space:nowrap;display:block;">

<spanid="div4" style="float:left;display:block;"><spanid="div2" style="float:left;">看下面代码前先负责上面html代码运行体&nbsp&nbsp<spanid="div3" style="float:left;">

<marquee scrollLeft='1' behavior='alternate'direction='left' scrollamount='6' scrolldelay='100'>看下面代码前先负责上面html代码运行体</marquee>

</body>

</html>

********************************************************************

看下面代码前先负责上面html代码运行体验一下

********************************************************************

/**

*conObj(contentObject):放置文字的组件对象

*calObj(calculationObjcet):用于计算的组件对象，即文字过长的情况下，在该组件范围内进行滚动，该组件有显式定义的长宽

* step：滚动步长，默认是文字宽度

* delay：滚动频率

* marqueeNum:文字长度上限(以半角字符为计数单位)，当文字长度超过这个范围，将进行滚动操作

* content:文字内容，当conObj组件中存在该内容，该参数可以省略

functionmarquee(conObj,calObj,step,delay,marqueeNum,content){ //文字过长时候的滚动操作

if(marquee.handle!=undefined)clearInterval(marquee.handle);

vartemp=(content!=undefined && typeof content=="string")?content:conObj.innerHTML;

if(marqueeNum==undefined|| getCharLength(temp)<marqueeNum){

conObj.innerHTML=temp;

return;

}

var x=0;

marquee.obj=calObj;

marquee.oldPosition=calObj.style.position;

calObj.style.position="relative";

marquee.oldOverflow=calObj.style.overflow;

calObj.style.overflow="hidden";

varw=calObj.offsetWidth;

varh=calObj.offsetHeight;

step=step?step:parseInt(getCurrentStyle(calObj,"fontSize").replace("px",""));

varfragment=document.createDocumentFragment();

for(vari=0,ilen=w;i<ilen;i+=step){

varrSpan=document.createElement("span");

rSpan.style.display="inline-block";

rSpan.style.width=step+"px";

fragment.appendChild(rSpan);

}

varlSpan=document.createElement("span");

lSpan.style.display="inline-block";

lSpan.innerHTML=temp;

varmainSpan=document.createElement("div");

mainSpan.style.position="absolute";

mainSpan.style.height=h+"px";

mainSpan.appendChild(lSpan);

mainSpan.appendChild(fragment);

mainSpan.style.left="0px";

conObj.innerHTML="";

conObj.appendChild(mainSpan);

varfinalW=mainSpan.offsetWidth;

varoldW=finalW;

marquee.handle=setInterval(function(){

x-=step;

mainSpan.style.left=x+"px";

varnewW=mainSpan.offsetWidth;

if(newW<=oldW){

conObj.innerHTML="<marqueescrollLeft='1' behavior='scroll' direction='left'scrollamount='"+step+"' scrolldelay='"+delay+"'>" +temp + "</marquee>";

clearInterval(marquee.handle);

}else{

oldW+=step;

}

},delay);

}

/**

* @descriptionsubText汉字与字符都都在时截取长度

* @param{string} _str需要截取的字符串

* @param{string} _subLength页面上展示字符串的长度（汉字个数*2）

* @param{number} _num是否滚动（num等于0时字符截取，num等于1时数据进行滚动）

/*IEPG.subText = function(_str, _subLength, _num) {

var temp1= _str.replace(/[^\x00-\xff]/g, "**");

var temp2= temp1.substring(0, _subLength);

varx_length = temp2.split("\*").length - 1;

varhanzi_num = x_length / 2;

_subLength= _subLength - hanzi_num;

var res =_str.substring(0, _subLength);

if(_num ===0) {

if(_subLength< _str.length) {

res= res;

}

returnres;

} else {

if(_subLength< _str.length) {

return"<marquee scrollLeft='1' behavior='alternate' direction='left'scrollamount='6' scrolldelay='100'>" + _str +"</marquee>";

}else {

return_str;

}

};*/

IEPG.subText= function(_str, _subLength, _num) {

var temp1= _str.replace(/[^\x00-\xff]/g, "**");

var temp2= temp1.substring(0, _subLength);

varx_length = temp2.split("\*").length - 1;

varhanzi_num = x_length / 2;

_subLength= _subLength - hanzi_num;

var res =_str.substring(0, _subLength);

if(_num=== 0) {

if(_subLength< _str.length) {

res= res;

}

returnres;

} else {

clearInterval(myMmar);

if(_subLength< _str.length) {

myMmar=setInterval(marqpueeInt,10);

return"<spanid='div4' style='float:left;display:block;'>" + _str + "&nbsp&nbsp<spanid='div3' style='float:left;'>";

}else {

return_str;

}

};

var myMmar;

function marqpueeInt(){

vars1=document.getElementById("div1");

vars2=document.getElementById("div2");

vars3=document.getElementById("div3");

vars4=document.getElementById("div4");

s4.style.width=(s2.offsetWidth*2)+"px";

s3.innerHTML=s2.innerHTML;

if(s2.offsetWidth<=s1.scrollLeft){

s1.scrollLeft-=s2.offsetWidth;

}else{

s1.scrollLeft++;

}

0 0