• 一款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
    
  • 相关阅读:
    05 . Python入门值循环语句
    04 . kubernetes资源清单YAML入门
    04 . Python入门之条件语句
    03 . Python入门之运算符
    05 . k8s实战之部署PHP/JAVA网站
    02 . Python之数据类型
    01 . Python简介
    04 . Mysql主从复制和Mycat读写分离
    03 . MysSQL权限和备份
    02 . Mysql基础操作及增删改查
  • 原文地址:https://www.cnblogs.com/webdm/p/2104102.html
Copyright © 2020-2023  润新知