一款JS+CSS打造绝对经典的资讯网站滑动门特效

代码简介：
很经典的新闻类网站滑动门特效，鼠标滑过就切换，而非点击，根据你的网站可适当调整。
代码内容：
<HTML>
<HEAD>
<TITLE>一款JS+CSS打造绝对经典的资讯网站滑动门特效_网页代码站(www.webdm.cn)</TITLE>
<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.webdm.cn/images/20101207/4/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>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</BODY>
</HTML>
代码来自：http://www.webdm.cn/webcode/b4db2a01-bede-461e-b343-2034b58298c3.html
posted @ 2011-07-12 11:54 网页代码站阅读(458) 评论(0) 编辑收藏举报
刷新页面返回顶部
一款JS+CSS打造绝对经典的资讯网站滑动门特效

公告
