注册 | 登陆

您的位置：阿里西西 > 网页特效 > 文字特效 > 详细内容

新浪体育频道文字滚动切换效果

稿源：互联网 2022-07-28 13:37:06 点击： 3631 撤稿纠错

新浪体育新闻文字滚动特效，兼容多种主流浏览器，带定时切换功能。

以下讨论的是和滚动切换相关的新浪体育频道文字滚动切换效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<style type="text/css">
td {
font-size: 12px;border-right: medium none; padding-right: 0px; border-top: medium none; padding-left: 0px; padding-bottom: 0px; margin: 0px; border-left: medium none; paddding-top: 0px; border-bottom: medium none
}
.NUM1 {color:#fff; width:80px; height:22px; cursor:pointer;}
.NUM2 {color: #fff; width:80px; height:22px; cursor:pointer; background:url(/img/1_104749_zzjs.gif) no-repeat; width:80px;}
.num{text-align:center;background:url(/img/1_104651_zzjs.jpg) no-repeat; margin-left:1px; font-weight:bold; font-family:SimHei; width:318px; height:22px; overflow:hidden;}
.num{*position:relative; top:-1px;}
#main a:link{color:#000; text-decoration:none;}
#main a:visited{color:#000; text-decoration:none;}
#main a:hover{color:#000; text-decoration:none;}
#main {line-height:14px;}
#main .title a:link{color:#f00; text-decoration:none;}
#main .title a:visited{color:#f00; text-decoration:none;}
#main .title a:hover{color:#f00; text-decoration:none;}
</style>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div style="z-index: 10; height:22px; overflow:hidden;">
<table cellspacing=0 cellpadding=0 width=22>
<tbody>
<tr>
<td>
<table cellspacing=0 class="num">
<tbody>
<tr>
<td width=0 style="display:none;"><img id="upbtn" style="cursor: pointer"></td>
</tr>
<tr>
<td id="led1" class="NUM2" onclick="javascript:slideTo(1);">1</td>
<td id="led2" class="NUM1" onclick="javascript:slideTo(2);">2</td>
<td id="led3" class="NUM1" onclick="javascript:slideTo(3);">3</td>
<td id="led4" class="NUM1" onclick="javascript:slideTo(4);">4</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<div id="main" style="overflow:hidden; width:320px; position:relative; height: 85px;" >
<div id="f1" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 0px; height: 85px;">

<div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/img/1_104315_zzjs.jpg) no-repeat;cursor:pointer;">
<div style="float:left; width:195px; padding:3px 0 0 3px;">
<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.zzjs.net/" target="_blank">詹姆斯：全力以赴</a></div>
<div><a href="http://www.zzjs.net/" target="_blank">竞猜赛事结果，上传LBJ精彩动作，评论比赛表现，都有机会赢取LBJ运动装备大奖...</a></div>
</div>
</div>

</div>
<div id="f2" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 85px; height: 85px">

<div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/img/1_104315_zzjs.jpg) no-repeat;cursor:pointer;">
<div style="float:left; width:195px; padding:3px 0 0 3px;">
<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.zzjs.net/" target="_blank">LBJ6详尽测评</a></div>
<div><a href="http://www.zzjs.net/" target="_blank">在整个LBJ签名系列里,仅次于LBJ2的签名球鞋.他在舒适性上完全可以同LBJ2相媲美.比起2代,只有那么一点点的不足...</a></div>
</div>
</div>

</div>
<div id="f3" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 170px; height: 85px">

<div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/img/1_104315_zzjs.jpg) no-repeat;cursor:pointer;">
<div style="float:left; width:195px; padding:3px 0 0 3px;">
<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.zzjs.net" target="_blank">免费篮球馆</a></div>
<div><a href="http://www.zzjs.net" target="_blank">京城一流室内篮球馆免费开放，新浪篮球体验周火热启动...</a></div>
</div>
</div>

</div>
<div id="f4" style="z-index: 10; left: 0px; width: 320px; position: absolute; top: 255px; height: 85px;">

<div style="width:308px; padding:5px; height:75px; margin-left:1px; background:url(/img/1_104315_zzjs.jpg) no-repeat;cursor:pointer;">
<div style="float:left; width:195px; padding:3px 0 0 3px;">
<div style="color:#f30; font-weight:bold; margin-bottom:8px;" class="title"><a href="http://www.zzjs.net" target="_blank">詹姆斯：有奖征文</a></div>
<div><a href="http://www.zzjs.net" target="_blank">NBA名人堂连续8周关注勒布朗詹姆斯跟踪骑士队比赛，竞猜评论赢取运动装备...</a></div>
</div>
</div>

</div>
</div>
</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
//<![CDATA[
var curFrame=1; //当前标签
var frameheight = 85; //单层高度
var speed = 5; //滚动速度
var waitTime = 4000; //自动播放间隔时间
var scrollItv;
var autoItv;
var maindiv = document.getElementById("main");
autoItv = setInterval(autoSlide, waitTime);
function slideTo(id){
curFrame = id;
var curTop = maindiv.scrollTop;
var tarTop = frameheight*(id-1);
var step = curTop>tarTop?-speed:speed;
clearInterval(autoItv);
clearInterval(scrollItv);
scrollItv = setInterval(function(){
maindiv.scrollTop += step;
if(Math.abs(maindiv.scrollTop-tarTop)<speed){
clearInterval(scrollItv);
maindiv.scrollTop = tarTop;
autoItv = setInterval(autoSlide, waitTime);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
},20);
for(i=1;i<=4;i++){
document.getElementById('led'+i).className='NUM1';
}
document.getElementById('led'+curFrame).className='NUM2';
}
function autoSlide(){
if(curFrame<4){curFrame++;}else{curFrame=1;}
slideTo(curFrame);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
//]]>
</script>

关于新浪体育频道文字滚动切换效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010090664473.shtml方便下次再访问哦。

·上一篇： 商城常用鼠标经过商品分类加亮特效
·下一篇： 完美网页选项卡代码

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻