您当前位置：首页 > web前端 > jscript > CSS+Javascript打造带动画效果的选项卡

CSS+Javascript打造带动画效果的选项卡

来源：程序员人生发布时间：2014-04-26 21:05:07 阅读次数：3359次

　　网(LieHuo.Net)教程这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，点击运行一下你会知道它的奥妙，它用JavaScript模拟出了Flash动画的效果，很贴切。

<HEAD><TITLE>CSS+Javascript打造带动画效果的选项卡－网</TITLE><meta http-equiv="Content-Type" content="text/html; charset=GBK"><style language="javascript"></style></HEAD><BODY><SCRIPT LANGUAGE="JavaScript"></SCRIPT><div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div><TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0><TR bgcolor=#ffffff><TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">ASP</TD><TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">PHP</TD><TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">ASP.NET</TD><TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">JSP</TD><TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">AJAX</TD><TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">DELPHI</TD></TR></TABLE><br><br><br><br><br><br><TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;"><TR><TD id='aim1' valign="top"></TD></TR></TABLE><br><br><br><br><TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0><TR bgcolor=#ffffff><TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">ASP</TD><TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">PHP</TD><TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">ASP.NET</TD><TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">JSP</TD><TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">AJAX</TD><TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">DELPHI</TD></TR></TABLE><div id="t1" class="hidden">ASP</div><div id="t2" class="hidden">PHP</div><div id="t3" class="hidden">ASP.NET</div><div id="t4" class="hidden">JSP</div><div id="t5" class="hidden">AJAX</div><div id="t6" class="hidden">DELPHI</div></BODY><br /><center>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Webmin使用教程：图形配置Linux服务器

下一篇 前台开发从头说起：谈谈CSS选择符

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点