没有尾部空白的横向滚动条

最新推荐文章于 2023-04-06 09:09:43 发布

danruo

最新推荐文章于 2023-04-06 09:09:43 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： function javascript class image border div

本文链接：https://blog.csdn.net/danruo/article/details/413589

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

作者：黄山村夫来源：黄山村夫站

方法如下：

一、在<head>与</head>之间插入以下代码：

<SCRIPT language=javascript>
function gdnewsl(news_id,news_name,news_link,news_image,news_content)
{
this.news_id=news_id;//序号
this.news_name=news_name;//名称
this.news_link=news_link;//链接
this.news_image=news_image;//图片
this.news_content=news_content;//欢迎词
}
/*-------------横滚-----------------*/
newsl=new Array();
newsl[1]=new gdnewsl('1','黄山村夫站','http://fym888.nease.net','<img src="image/cflogo3.gif" width="120" height="50">','欢迎光临！');
newsl[2]=new gdnewsl('2','黄山小草站','',' ','欢迎光临！');
newsl[3]=new gdnewsl('3','黄山村夫站','http://fym888.nease.net','<img src="image/cflogo3.gif" width="120" height="50"> ','欢迎光临！');
newsl[4]=new gdnewsl('4','黄山小草站','http://fjx3721.myrice.com',' ','欢迎光临！');
newsl[5]=new gdnewsl('5','黄山村夫站','http://fym888.nease.net','<img src="image/cflogo3.gif" width="120" height="50"> ','欢迎光临！');
newsl[6]=new gdnewsl('6','黄山小草站','http://fjx3721.myrice.com','<img src="image/cflogo3.gif" width="120" height="50"> ','欢迎光临！');
newsl[7]=new gdnewsl('7','黄山村夫站','http://fym888.nease.net','<img src="image/cflogo3.gif" width="120" height="50"> ','欢迎光临！');
newsl[8]=new gdnewsl('8','黄山小草站','http://fjx3721.myrice.com',' ','欢迎光临！');
newsl[9]=new gdnewsl('9','黄山村夫站','http://fym888.nease.net','<img src="image/cflogo3.gif" width="120" height="50"> ','欢迎光临！');
newsl[10]=new gdnewsl('10','黄山小草站','http://fjx3721.myrice.com',' ','欢迎光临！');

isns = navigator.appName == "Netscape";
function initl()
{
if(isns)
{
tag0='document.divnewsl.document.clipnewsl.document.'
tag1='document.divnewsl.document.clipnewsl.'
tag2=''
}
else
{
tag0=''
tag1=''
tag2='.style'
}
newsnuml=newsl.length-1
if(isns) eval(tag1+'clip.width=540')
eval(tag0+'newsl1'+tag2+'.left=0')
if(isns) eval(tag1+'visibility="show"')
if(newsnuml>5) newsmovel()
}
stephl=1
nnl=false
strtnum=false
widthlimit=340
function newsmovel()
{
nnl=true
strtnum=true
xminl=1
for(i=1;i<=newsnuml;i++)
{
if(isns) xleft=eval(tag0+'newsl'+xminl+'.left')
else xleft=eval('newsl'+xminl+'.style.pixelLeft')
if(isns) nileft=eval(tag0+'newsl'+i+'.left')
else nileft=eval('newsl'+i+'.style.pixelLeft')
if(nileft<xleft) xminl=i
}
if(isns) tt=eval(tag0+'newsl'+xminl+'.left');
else tt=eval('newsl'+xminl+'.style.pixelLeft');
tt-=stephl;
eval(tag0+'newsl'+xminl+tag2+'.left=tt');
xmaxl=xminl-1
if(xminl==1) xmaxl=newsnuml
if(xminl>=1&&xminl<newsnuml)
for(i=xminl+1;i<=newsnuml;i++)
{
j=i-1
followl(i,j)
}
if(xminl!=1)
for(i=1;i<=xmaxl;i++)
{
j=i-1
if(j==0) j=newsnuml
followl(i,j)
}
for(i=1;i<newsnuml;i++)
{
if(isns) lefti=eval(tag0+'newsl'+i+'.left')
else lefti=eval('newsl'+i+'.style.pixelLeft')
if(isns) widthi=eval(tag0+'newsl'+i+'.clip.width')
else widthi=eval('newsl'+i+'.offsetWidth')
righti=lefti+widthi
if(righti<-14)
eval(tag0+'newsl'+i+tag2+'.left=widthlimit')
}

if(nnl) domovel=setTimeout('newsmovel()',20);
}

function stopml()
{
if(nnl)
{clearTimeout(domovel)
nnl=false}
}

function startml()
{
if(!nnl&&strtnum) newsmovel()
}

function followl(nexti,prei)
{
if(isns) newleft=eval(tag0+'newsl'+prei+'.left')
else newleft=eval('newsl'+prei+'.style.pixelLeft')
if(isns) newwidth=eval(tag0+'newsl'+prei+'.clip.width')
else newwidth=eval('newsl'+prei+'.offsetWidth')
newpos=newleft+newwidth+13
if(newpos>widthlimit) newpos=widthlimit
eval(tag0+'newsl'+nexti+tag2+'.left='+newpos)
}
</SCRIPT>
<style type="text/css">

</style>

二、在你要插入滚动条的地方插入以下代码：

<div id="Laye1" style="position:absolute; width:2px; height:1px; z-index:1">
<DIV id=divnewsl Style="LEFT: 10px; WIDTH: 226px; POSITION: relative; TOP: 0px">
<DIV id=clipnewsl style="LEFT: 14px; WIDTH: 357px; CLIP: rect(0px 300px 151px 0px); POSITION: absolute; TOP: 0px; height: 18px">
<SCRIPT language=javascript>
aal=''
for(i=1;i<(newsl.length);i++)
{
dd=(i-1)*210
if(i>5) dd=340
aal="<div id=newsl"+i+" οnmοuseοver=stopml() οnmοuseοut=startml() style='position:absolute;left:"+dd+"'>"
if(newsl[i].news_link!='')
aal+="<table border=0 cellpadding=0 cellspacing=0><tr><td><a href="+newsl[i].news_link+" target=_blank class=a1 >"+newsl[i].news_content+"</a></td></tr><tr><td height=6></td></tr><tr><td width=120 height=16 bgcolor='#ccccff' align=center valign=top class=a2>"+newsl[i].news_image+"<br><a href="+newsl[i].news_link+" target=_blank class=a1 οnmοuseοver=stopml() οnmοuseοut=startml()>"+newsl[i].news_name+"</a></td></tr></table></div>"
else
aal+="<table border=0 cellpadding=0 cellspacing=0><tr><td class=a1>"+newsl[i].news_content+"</td></tr><tr><td height=6></td></tr><tr><td width=120 height=16 bgcolor='#CCFFcc' align=center class=a2 valign=top>"+newsl[i].news_name+"</td></tr></table></div>"
document.write(aal)
}
</SCRIPT>
</DIV>
</DIV>
</div>

三、按上面的说明修改成你要在滚动条中显示的内容

一切OK！

danruo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
没有尾部空白的横向滚动条

作者：黄山村夫来源：黄山村夫站方法如下：一、在与之间插入以下代码：function gdnewsl(news_id,news_name,news_link,news_image,news_content){this.news_id=news_id;//序号this.news_name=news_name;//名称this.news_link=news_link;//链接this.news_i
复制链接

扫一扫

专栏目录