两种滚动跑马灯效果-从当前位置开始
2014-07-28 16:43
148 查看
<!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>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>左右无间断滚动效果，wj整理收集。</title>
<script language="javascript"type="text/javascript">
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>
<span style="width:200px;display:block;">
<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代码运行体 </span><spanid="div3"
style="float:left;"></span></span>
</span>
<span>
<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"<span id='div1'style='width:90%;height:auto;overflow:hidden;white-space:nowrap;display:block;'><spanid='div4' style='float:left;display:block;'><span
id='div2'style='float:left;'>" + _str + " </span><spanid='div3' style='float:left;'></span></span></span>";
}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++;
}
}
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>左右无间断滚动效果，wj整理收集。</title>
<script language="javascript"type="text/javascript">
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>
<span style="width:200px;display:block;">
<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代码运行体 </span><spanid="div3"
style="float:left;"></span></span>
</span>
<span>
<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"<span id='div1'style='width:90%;height:auto;overflow:hidden;white-space:nowrap;display:block;'><spanid='div4' style='float:left;display:block;'><span
id='div2'style='float:left;'>" + _str + " </span><spanid='div3' style='float:left;'></span></span></span>";
}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++;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android 文字自动滚动（跑马灯）效果的两种实现方法
- Android 文字自动滚动（跑马灯）效果的两种实现方法
- Android 文字自动滚动（跑马灯）效果的两种实现方法
- Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]
- Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]
- Android 文字自动滚动（跑马灯）效果的两种实现方法
- Android 文字自动滚动（跑马灯）效果的两种实现方法
- Android 文字自动滚动（跑马灯）效果的两种实现方法
- Android 文字自动滚动（跑马灯）效果的两种实现方法
- 【Android】跑马灯效果（文字滚动）
- 刷新时滚动条任然停留在当前位置
- 浅谈android的跑马灯效果（文字滚动）
- TextView文字横向滚动（跑马灯效果）
- 跑马灯效果（文字滚动）
- 按下按钮后页面的滚动条向下（或向上）滑动，松开之后便停留在当前位置的效果如何实现？
- 一直滚动的TextView[跑马灯效果]
- android中TextView中文本滚动的跑马灯效果
- 选中DataGridView控件的某一行并将其位置滚动到当前选中行
- 设置当前表页不滚动行的位置
- ASP.NET页面回传后保持当前的滚动（垂直）位置