• 注册
热门标签
↑ 收起导航

滑动门:JS+CSS仿新浪的滑动门技术

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DIV+CSS仿新浪滑动门技术 AJAX _ 诺豆网 yangjunwei.com</title>
<style>
    body { font-family: "宋体"; font-size: 12px; color: #525252; }
    td { font-family: "宋体"; font-size: 12px; color: #525252; }
    a:link { color: #525252; font-size: 12px; text-decoration: none; }
    a:visited{ color: #525252; font-size: 12px; text-decoration: none; }
    a:hover { color: #ff6600; font-size: 12px; text-decoration: underline; }
    .gd1{ font-family: "宋体"; font-size: 12px; color: #ff0000; }
    .sec11 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; BORDER-LEFT: #C5E1FE 1px solid; CURSOR: hand; COLOR: #01499A; BORDER-BOTTOM: #C5E1FE 1px solid; BACKGROUND-COLOR: #ffffff}
    .sec21 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; FONT-WEIGHT: 800;color:#01499A; BORDER-LEFT: #C5E1FE 1px solid;BORDER-BOTTOM: #C5E1FE 1px solid; CURSOR: hand; BACKGROUND-COLOR: #E6EEF7;BACKGROUND:url('/icon/098.gif') no-repeat}
    .main_tab {BACKGROUND-COLOR: #ffffff}
</style>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n){
    for(i=0;i<secTable.cells.length;i++)
        secTable.cells[i].className="sec11";
        secTable.cells[n].className="sec21";
    for(i=0;i<mainTable.tBodies.length;i++)
        mainTable.tBodies[i].style.display="none";
        mainTable.tBodies[n].style.display="block";
}
</SCRIPT>
</head>
<br /><br />
<body>
<p align="center">这里便于演示,只设置了两个栏目切换,你可以根据需要,自行增加栏目!修改CSS使它更适合你的网站<br><br>
    <a target="_blank" href="http://yangjunwei.com/">有问题请看这里</a></p>
<div align="center">
    <table border="0" width="200" cellpadding="0" cellspacing="0" style="border-collapse: collapse" height="145" id="table7" bgcolor=#ecf5ff>
        <tr>
            <td height="145">
                <div align="center">
                    <table border="0" width="200" cellpadding="0" style="border-collapse: collapse" height="140" id="table107">
                        <tr>
                            <td height="25">
                                <div align="center">
                                    <table border="0" width="220" cellpadding="0" style="border-collapse: collapse" height="22" id=secTable>
                                        <tr>
                                            <td onmouseover=secBoard(0) width="50%">
                                                <p align="center">菜单特效</td>
                                            <td onmouseover=secBoard(1) width="50%">
                                                <p align="center">网页特效简介</td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td height="115">
                                <div align="center">
                                    <table id=mainTable border="0" width="195" cellpadding="0" style="border-collapse: collapse" height="115">
                                        <TBODY style="DISPLAY: block"><tr>
                                            <td height="145">
                                                <div align="center">
                                                <table border="0" width="205" cellpadding="0" style="border-collapse: collapse" height="138">
                                                    <tr>
                                                        <td height="23" width="15" valign="middle">·</td>
                                                        <td height="23" width="180">
                                                            <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">超酷XP风格网页右键菜单</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td height="23" width="15">·</td>
                                                        <td height="23" width="180">
                                                            <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">通用3级联动菜单</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td height="23" width="15">·</td>
                                                        <td height="23" width="180">
                                                            <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">相当好玩的右键弹出菜单</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td height="23" width="15">·</td>
                                                        <td height="23" width="180">
                                                            <a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">用CSS设计的纵向导航条实例</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td height="23" width="15">·</td>
                                                        <td height="23" width="180"><a target="_blank" style="color: #01499a" href="http://yangjunwei.com/">将网站设为首页的代码</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td height="23" width="195" colspan="2">
                                                            <p align="right"><font color="#01499A">
                                                                <a target="_blank" href="http://yangjunwei.com/">
                                                                    <font color="#01499A">更多</font><font color="#01499A" face="Arial">>>></font></a></font></td>
                                                    </tr>
                                                </table></div></td></tr></TBODY>
                                        <TBODY style="DISPLAY: none"><tr>
                                            <td height="145"><div align="center">
                                                <table border="0" width="205" cellpadding="0" style="border-collapse: collapse" height="138">
                                                    <tr>
                                                        <td height="138" width="195" style="line-height: 150%">
                                                            <p>
                                                                <b>
                                                                    <a target="_blank" href="http://yangjunwei.com/">网页特效</a></b>是用程序代码在网页中实现特殊效果或者特殊功能的一种技术,它为网页活跃了气氛,增加了网站的亲和力。为网页添加特效,学会添加<a target="_blank" href="http://yangjunwei.com/">网页特效</a>的过程能从一定程度上激发网页初学者更加了解HTML语言的结构。</td></tr></table></div></td></tr></TBODY>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
<br /><br />
<br /><br />
本代码来源:<a href=http://yangjunwei.com>诺豆网 yangjunwei.com</a>
</html>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/124.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册