全国400电话网上服务平台
强大号码库资源任选,方便,快捷,快速开通。
咨询热线:400-1100-266
强大号码库资源任选,方便,快捷,快速开通。
咨询热线:400-1100-266
怎样实现织梦滚动文章列表的调用
POST TIME:2020-04-22 17:48
今天整理一个在织梦文章列表向上滚动的知识点,实例是http://www.cctv-ss.com/首页的滚动文章列表,如下图:
其实方法很简单
1、在需要滚动文章列表的地方,用织梦的文章列表标签调用有“滚动”属性的文章。假设滚动文章列表的div是<DIVid=ScrollMe>,文章列表的代码如下:
<DIVid=ScrollMe>
{dede:artlistrow='4'flag=s}
<Atitle=[field:title/]href="[field:arcurl/]">[field:title/]</A><SPAN>[field:pubdatefunction="MyDate('Y/m/dH:i',@me)"/]</SPAN><BR>
{/dede:artlist}
</DIV>
2、在添加js代码,代码如下:
(1)下面这段代码放到文章列表代码的上面:
<SCRIPT>functionsrcMarquee(){
this.ID=document.getElementById(arguments[0]);
if(!this.ID){this.ID=-1;return;}
this.Direction=this.Width=this.Height=this.DelayTime=this.WaitTime=this.Correct=this.CTL=this.StartID=this.Stop=this.MouseOver=0;
this.Step=1;
this.Timer=30;
this.DirectionArray={"top":0,"bottom":1,"left":2,"right":3};
if(typeofarguments[1]=="number")this.Direction=arguments[1];
if(typeofarguments[2]=="number")this.Step=arguments[2];
if(typeofarguments[3]=="number")this.Width=arguments[3];
if(typeofarguments[4]=="number")this.Height=arguments[4];
if(typeofarguments[5]=="number")this.Timer=arguments[5];
if(typeofarguments[6]=="number")this.DelayTime=arguments[6];
if(typeofarguments[7]=="number")this.WaitTime=arguments[7];
if(typeofarguments[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();
}
srcMarquee.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(typeofthis.Direction=="string")this.Direction=this.DirectionArray[this.Direction.toString().toLowerCase()];
this.HalfWidth=Math.round(this.Width/2);
this.BakStep=this.Step;
this.ID.style.width=this.Width;
this.ID.style.height=this.Height;
if(typeofthis.ScrollStep!="number")this.ScrollStep=this.Direction>1?this.Width:this.Height;
varmsobj=this;
vartimer=this.Timer;
vardelaytime=this.DelayTime;
varwaittime=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:msobj.ID.scrollHeight;
if((msobj.Direction<=1&&msobj.ClientScroll<msobj.Height)||(msobj.Direction>1&&msobj.ClientScroll<msobj.Width))return;
msobj.ID.innerHTML+=msobj.ID.innerHTML;
msobj.TimerID=setInterval(msobj.StartID,timer);
if(msobj.ScrollStep<0)return;
msobj.ID.onmousemove=function(event){
if(msobj.ScrollStep==0&&msobj.Direction>1){
varevent=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);
}
srcMarquee.prototype.Scroll=function(){
switch(this.Direction){
case0:
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;
case1:
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;
case2:
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;
case3:
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>
(2)这段代码放到文章列表的下面:
<SCRIPT>newsrcMarquee("ScrollMe",0,1,808,43,10,3000,3000,43)</SCRIPT>
现在你在织梦后台添加文章,选中滚动属性‘s’,你的文章列表就应该滚动起来了。
其实方法很简单
1、在需要滚动文章列表的地方,用织梦的文章列表标签调用有“滚动”属性的文章。假设滚动文章列表的div是<DIVid=ScrollMe>,文章列表的代码如下:
<DIVid=ScrollMe>
{dede:artlistrow='4'flag=s}
<Atitle=[field:title/]href="[field:arcurl/]">[field:title/]</A><SPAN>[field:pubdatefunction="MyDate('Y/m/dH:i',@me)"/]</SPAN><BR>
{/dede:artlist}
</DIV>
2、在添加js代码,代码如下:
(1)下面这段代码放到文章列表代码的上面:
<SCRIPT>functionsrcMarquee(){
this.ID=document.getElementById(arguments[0]);
if(!this.ID){this.ID=-1;return;}
this.Direction=this.Width=this.Height=this.DelayTime=this.WaitTime=this.Correct=this.CTL=this.StartID=this.Stop=this.MouseOver=0;
this.Step=1;
this.Timer=30;
this.DirectionArray={"top":0,"bottom":1,"left":2,"right":3};
if(typeofarguments[1]=="number")this.Direction=arguments[1];
if(typeofarguments[2]=="number")this.Step=arguments[2];
if(typeofarguments[3]=="number")this.Width=arguments[3];
if(typeofarguments[4]=="number")this.Height=arguments[4];
if(typeofarguments[5]=="number")this.Timer=arguments[5];
if(typeofarguments[6]=="number")this.DelayTime=arguments[6];
if(typeofarguments[7]=="number")this.WaitTime=arguments[7];
if(typeofarguments[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();
}
srcMarquee.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(typeofthis.Direction=="string")this.Direction=this.DirectionArray[this.Direction.toString().toLowerCase()];
this.HalfWidth=Math.round(this.Width/2);
this.BakStep=this.Step;
this.ID.style.width=this.Width;
this.ID.style.height=this.Height;
if(typeofthis.ScrollStep!="number")this.ScrollStep=this.Direction>1?this.Width:this.Height;
varmsobj=this;
vartimer=this.Timer;
vardelaytime=this.DelayTime;
varwaittime=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:msobj.ID.scrollHeight;
if((msobj.Direction<=1&&msobj.ClientScroll<msobj.Height)||(msobj.Direction>1&&msobj.ClientScroll<msobj.Width))return;
msobj.ID.innerHTML+=msobj.ID.innerHTML;
msobj.TimerID=setInterval(msobj.StartID,timer);
if(msobj.ScrollStep<0)return;
msobj.ID.onmousemove=function(event){
if(msobj.ScrollStep==0&&msobj.Direction>1){
varevent=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);
}
srcMarquee.prototype.Scroll=function(){
switch(this.Direction){
case0:
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;
case1:
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;
case2:
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;
case3:
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>
(2)这段代码放到文章列表的下面:
<SCRIPT>newsrcMarquee("ScrollMe",0,1,808,43,10,3000,3000,43)</SCRIPT>
现在你在织梦后台添加文章,选中滚动属性‘s’,你的文章列表就应该滚动起来了。
Copyright © 2003-2016
时间:9:00-21:00 (节假日不休)
版权所有:巨人网络(扬州)科技有限公司
总部地址:江苏省信息产业基地11号楼四层
《增值电信业务经营许可证》 苏B2-20120278
时间:9:00-21:00 (节假日不休)
版权所有:巨人网络(扬州)科技有限公司
总部地址:江苏省信息产业基地11号楼四层
《增值电信业务经营许可证》 苏B2-20120278