纯js类似选项卡的切换效果代码-网页编程网

当前位置：主页 >> 网页特效 >> 正文

纯js类似选项卡的切换效果代码

阅读：3840 输入：2016-07-13 09:28:50

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="a1" width="140" valign="top" align="center">
<div class="test">本站简介</div>
<div class="test">站长特效一号</div>
<div class="test">站长特效二号</div>
<div class="test">站长特效三号</div>
<div class="test">站长特效四号</div>
<div class="test">站长特效五号</div>
<div class="test">站长特效六号</div>
<div class="test">站长特效七号</div>
<div class="test">站长特效八号</div>
<div class="test">站长特效九号</div>
<div class="test">站长特效十号</div>
<div class="test">站长特效十一号</div>
</td>
<td id="b1" valign="top">
<div class="s">
站长特效网，专注网页特效及广告代码，供站长和js爱好者参考
</div>
<div class="s">

<div id="a2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="b2">
<div>这个例子是用onclick触发的<br>并设置overStyle = true;<br>(over，out改变样式,但不激活)</div>
<div>
var bba = new opCard();<br>
bba.bind = ["a2","li","b2","div"];<br>
bba.style = ["style1","style2","style1"];<br>
bba.overStyle = true;<br>
bba.creat();<br>
bba = null;
</div>
<div>33333</div>
<div>4444444</div>
</div><br>

<div id="a3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li skip="true">4</li>
</ul>
</div>
<div id="b3">
<div>
这个例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以选项卡4是没有内容的<br>
你可以为选项卡的文字直接加上链接，我这里就不加了
</div>
<div>222222</div>
<div>33333</div>
<div>4444444</div>
</div>
</div>
<div class="s">

<div id="a4">
<ul>
<li>1</li>
<li>2</li>
<li skip="true">3</li>
<li>4</li>
</ul>
</div>
<div id="b4">
<div>这个例子是用onmouseover触发的<br>(over，out直接激活)<br>并且<li skip="true">3</li>[选项卡3不会被激活]<br>overStyle = true;</div>
<div>
var cc = new opCard();<br>
cc.bind = ["a4","li","b4","div"];<br>
cc.style = ["style1","style2","style1"];<br>
cc.overStyle = true;<br>
cc.overChange = true;<br>
cc.creat();<br>
cc = null;
</div>
<div>33333</div>
<div>4444444</div>
</div>
</div>
<div class="s">

<div id="a5">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="b5">
<div>1111111<br>我每3秒切换一个选项卡</div>
<div>
var ee = new opCard();<br>
ee.bind = ["a6","li","b6","div"];<br>
ee.style = ["style1","style2","style1"];<br>
ee.auto = [true, 2000];<br>
ee.overChange = true;<br>
ee.creat();<br>
ee = null;
</div>
<div>33333<br>我每3秒切换一个选项卡</div>
<div>4444444<br>我每3秒切换一个选项卡</div>
</div>
<div>注：<strong>鼠标在选项卡任意位置都会使停止播放</strong><br><br>下面这个结合overChange一起</div>

<div id="a6">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="b6">
<div>1111111<br>我每2秒切换一个选项卡</div>
<div>
var dd = new opCard();<br>
dd.bind = ["a5","li","b5","div"];<br>
dd.style = ["style1","style2","style1"];<br>
dd.auto = [true, 3000];<br>
dd.creat();<br>
dd = null;<br>
</div>
<div>33333<br>我每2秒切换一个选项卡</div>
<div>4444444<br>我每2秒切换一个选项卡</div>
</div>
<div><br>下面这个再来个<li skip="true">3</li>，且overStyle=true;</div>

<div id="a7">
<ul>
<li>1</li>
<li>2</li>
<li skip="true">3</li>
<li>4</li>
</ul>
</div>
<div id="b7">
<div>1111111<br>我每1秒切换一个选项卡</div>
<div>
var ff = new opCard();<br>
ff.bind = ["a7","li","b7","div"];<br>
ff.style = ["style1","style2","style1"];<br>
ff.auto = [true, 1000];<br>
ff.overChange = true;<br>
ff.overStyle = true;<br>
ff.creat();<br>
ff = null;
</div>
<div>33333<br>我每1秒切换一个选项卡</div>
<div>4444444<br>我每1秒切换一个选项卡</div>
</div>
</div>

<div class="s">
<div id="a8">
<ul>
<li skip="true">首页</li>
<li>新闻</li>
<li>论坛</li>
<li skip="true">联系我们</li>
</ul>
</div>
<div id="b8">
<div></div>
<div><a href="#">国内新闻</a><a href="#">国际新闻</a><a href="#">娱乐新闻</a><a href="#">体育新闻</a></div>
<div><a href="#">蓝色理想</a><a href="#">blue idea</a></div>
<div></div>
</div>
<div><strong>注：菜单延时一秒关闭</strong><br>这里只是演示，实际可以设置下position什么的。-o-<br>多级菜单不知道能不能支持，没试过</div>
</div>
<div class="s">
我见过的许多选项卡都不能用来嵌套<br>但还是有些时候会用到的<br>
所以如您所见，这个演示本身就是一个嵌套，效果还不错
</div>

<div class="s">
比如图片切换什么，不过我太懒了，不写了。。。<br>
这个能干什么，我也不知道。。
<div id="a9">
<li>新年好啊</li>
<li>快过年了</li>
<li>天好冷啊</li>
<li>大家去抢红包吧</li>
<li>红包~！红包~！你在哪里啊？</li>
</div>
</div>
<div class="s">
选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错<br>即使选项卡菜单skip="true"，内容也要放一个空的标签占位<br>
其他好像暂时没发现什么<br><br>
本来打算加入ajax的，但有些还没想好。<br>
效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错<br><br>
写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异<br>
本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。<br><br>
哦，还有选项卡是附加样式，不会取消原本设置的样式<br>
如左边的下划线是原有的样式
</div>
<div class="s">特效站！</div>
<div class="s">喜欢就收藏本站吧！站长特效，不会让你失望的。</div>
<div class="s">永远是最帅的！</div>
<div class="s">欢迎下次再来！</div>
</td>
</tr>
</table>
</body>
</html>

上一篇：php教程：isset() , unnset(), empty()
下一篇：各种媒体数据以 base64 编码方式直接嵌入网页中的写法

相关阅读: 兼容所有浏览器js滑动门，tab选项卡特效代码; 纯css实现tab选项卡切换特效; 纯css+js实现tab标签