模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
绝对经典的滑动门特效代码_菜单导航特效
查看演示效果
特效Tag:
滑动门
添加
很经典的新闻类网站滑动门殊效,鼠标滑过就切换,而非点击,根据你的网站可适当调整。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML><HEAD><TITLE>尽对经典资讯网站滑动门殊效</TITLE> <META http-equiv=Content-Type mrc="text/html; charset=gb2312"> <style type="text/css"> <!-- *{padding:0; margin:0} img{border:0; display:block;} BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center } .dis { DISPLAY: block } .undis { DISPLAY: none } #cntR { WIDTH: 302px } #NewsTop { CLEAR: both; MARGIN-BOTTOM: 16px } #NewsTop P { FLOAT: left; LINE-HEIGHT: 21px } #NewsTop P.topTit { FONT-WEIGHT: bold; WIDTH: 117px } #NewsTop P.topC0 { BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer } #NewsTop P.topC1 { BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff } #NewsTop #NewsTop_tit { BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px } #NewsTop #NewsTop_cnt { PADDING-LEFT: 32px; BACKGROUND: url(http://www.mb5u.com/jscss/demoimg/200901/li.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left } #NewsTop #NewsTop_cnt A { COLOR: #666; TEXT-DECORATION: none } #NewsTop #NewsTop_cnt A:hover { COLOR: #c2130e; TEXT-DECORATION: underline } --> </style> </HEAD> <BODY> <DIV id="cntR"> <DIV id="NewsTop"> <DIV id="NewsTop_tit"> <P class="topTit">新闻排行</P> <P class="topC0">国内</P> <P class="topC0">国际</P> <P class="topC0">社会</P> <P class="topC0">网评</P> </DIV> <DIV id="NewsTop_cnt"> <SPAN title="Don't delete me"></SPAN> <SPAN> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很酷的JavaScript图片放大效果</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <div align="right"><A href="#" target=_self>...more</A></div> </SPAN> <SPAN> <A href="#" target=_self>很酷的JavaScript图片放大效果</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很酷的JavaScript图片放大效果</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <div align="right"><A href="#" target=_self>...more</A></div> </SPAN> <SPAN> <A href="#" target=_self>仿天极网首页幻灯图片切换殊效</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <A href="#" target=_self>仿天极网首页幻灯图片切换殊效</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>仿天极网首页幻灯图片切换殊效</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <div align="right"><A href="#" target=_self>...more</A></div> </SPAN> <SPAN> <A href="#" target=_self>非常炫的图片殊效,响应鼠标变化</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>非常炫的图片殊效,响应鼠标变化</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>非常炫的图片殊效,响应鼠标变化</A><BR> <A href="#" target=_self>很实用的对联广告代码(自适应高度)</A><BR> <A href="#" target=_self>可拖动、封闭及最小化的层拖动窗口</A><BR> <div align="right"><A href="#" target=_self>...more</A></div> </SPAN> </DIV> <SCRIPT> var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p'); var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span'); var len=Tags.length; var flag=1;//修改默认值 for(i=1;i<len;i++){ Tags[i].value = i; Tags[i].onmouseover=function(){changeNav(this.value)}; TagsCnt[i].className='undis'; } Tags[flag].className='topC1'; TagsCnt[flag].className='dis'; function changeNav(v){ Tags[flag].className='topC0'; TagsCnt[flag].className='undis'; flag=v; Tags[v].className='topC1'; TagsCnt[v].className='dis'; } </SCRIPT> </DIV> </DIV> </BODY></HTML>
所属频道:
菜单导航特效
/
更新时间:2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
自动定时切换的TAB选项卡/滑动门
又一款黑色漂亮的DIV+CSS导航条
边框随拖动而移动的导航菜单
超帅的CSS菜单导航(当前项带下划线)
CSS仿支付宝菜单,自己亲手写的
蓝绿背景切换的漂亮CSS菜单
蓝色经典CSS导航菜单
三级树形竖向收缩列表菜单
会活动的导航菜单
CSS+JS滑动门菜单(荐)
猜你也喜欢看这些
跟随鼠标的图片
让IE6不出现图像工具栏
点击图片某一区域放大图片,新型图片放大特效
CSS 图片放大查看特效
向上翻动的内容切换示例
JavaScript 图片滚动(绝对酷)
无缝垂直图片滚动的JS代码
CSS使用overflow实现鼠标经过放大缩略图
JavaScript改变图片透明度,鼠标放上渐渐显示
JS图片预加载代码
相关链接:
复制本页链接
|
搜索绝对经典的滑动门特效代码
特效说明:
菜单导航模板
-
绝对经典的滑动门特效代码
。