网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
图层样式
-> 一款简洁漂亮的CSS滑动门特效
一款简洁漂亮的CSS滑动门特效
作者:佚名 发布时间:2010-10-8 5:40:03 发布人: admin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>一款简洁漂亮的CSS滑动门特效丨网页特效丨myjs.jz123.Cn</title> <style media="screen" type="text/css"> </style> <script type="text/javascript" language="javascript"> //<!CDATA[ function g(o){return document.getElementById(o);} function HoverLi(n){ //如果有N个标签,就将i<=N; //本功能非常OK,兼容IE7,FF,IE6;http://www.jz123.cn/ [站长家园] for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab'; } //如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick; //]]> </script> </head> <body> <div class="w936"> <div id="tb_" class="tb_"> <ul> <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);"> Tab ①</li> <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);"> Tab ②</li> <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);"> Tab ③</li> <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);"> Tab ④</li> <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);"> Tab ⑤</li> <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);"> Tab ⑥</li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_01">Tab ① 的内容<br/><img src="http://web.archive.org/web/20150328121922im_/http://www.jz123.cn/xml/tool.gif"/></div> <div class="undis" id="tbc_02">Tab ② 的内容<br/><img src="http://web.archive.org/web/20150328121922im_/http://www.jz123.cn/xml/22.jpg"/></div> <div class="undis" id="tbc_03">Tab ③ 的内容<br/><img src="http://web.archive.org/web/20150328121922im_/http://www.jz123.cn/image/06la.jpg"/></div> <div class="undis" id="tbc_04">Tab ④ 的内容<br/><img src="http://web.archive.org/web/20150328121922im_/http://www.jz123.cn/image/55l2.gif"/></div> <div class="undis" id="tbc_05">Tab ⑤ 的内容<br/><img src="http://web.archive.org/web/20150328121922im_/http://www.jz123.cn/image/55l3.gif"/></div> <div class="undis" id="tbc_06">Tab ⑥ 的内容<br/><img src="http://web.archive.org/web/20150328121922im_/http://www.jz123.cn/xml/tool.gif"/></div> </div> </div> <hr size="1" noshade="noshade" style="color:#064ca1;margin-top:30px;"/> </body> </html>
一款简洁漂亮的CSS滑动门特效
将本文收藏到QQ书签与更多好友分享
上一篇：文章：
结构和表现分离的Tab选项卡特效
下一篇：文章：
三款简洁Tab选项卡、滑动门
本类浏览排行 »
三款简洁Tab选项卡、滑动门
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
非常个性化的下拉列表样式
JS实现的始终固定在页面底部的菜单
非常酷的左右交叉合并的导航效果
Js检测判断URL网址输入是否正确
一款鼠标滑过变色残影效果的炫彩菜单
本站推荐文章 »
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
滑动的div层做的动态菜单
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果