zoukankan      html  css  js  c++  java
  • 导航条点击按钮切换效果

    <!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><![endif]-->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
    <meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
    <title>网页特效 实用导航菜单切换 sky整理收集,站长特效网欢迎您。</title>
    <style>
    * {
    margin:0;
    padding:0;
    font-size:12px;
    }
    img {
    border:none;
    }
    ul,ol {
    list-style:none;
    }
    #content {
    margin:20px auto;
    border:1px solid #a5b5c0;
    158px;
    height:241px;
    background:url(/img/1_211958.gif);
    overflow:hidden;
    }
    #title {
    height:17px;
    *height:16px;
    background:url(/img/1_211943.gif) repeat-x;
    border-bottom:1px solid #a5b5c0;
    padding:3px 0 0 6px;
    *padding:4px 0 0 6px;
    font-weight:700;
    }
    #title li {
    float:left;
    display:inline;
    92px;
    }
    #tit_l {
    float:left;
    92px;
    overflow:hidden;
    height:14px;
    }
    #tit_r {
    float:right;
    margin-top:-1px;
    *margin-top:-2px;
    }
    #tit_r img {
    margin-right:4px;
    cursor:pointer;
    }
    #tit_r img:hover {
    filter: Alpha(Opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    }
    #text {
    clear:both;
    height:210px;
    }
    #text ul {
    background:url(/img/1_212047.gif) no-repeat 12px 4px;
    margin:6px 0;
    }
    #text li {
    padding-left:34px;
    line-height:21px;
    }
    #text li a {
    color:#123b8d;
    text-decoration:none;
    }
    #text li a:hover {
    text-decoration:underline;
    }
    </style>
    </head>
    <body>
    <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
    <!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
    <div id="content">
    <div id="title">
    <div id="tit_l">
    <div id="mytit">
    <ul>
    <li>热门搜索</li>
    <li>热门体育</li>
    <li>热门娱乐</li>
    </ul>
    </div>
    </div>
    <div id="tit_r"><img src="/img/1_212017.gif" alt="" /><img src="/img/1_212034.gif" alt="" /></div>
    </div>
    <div id="text">
    <ul id="c1">
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    <li><a href="#">热门搜索的内容</a></li>
    </ul>
    <ul id="c2">
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    <li><a href="#">热门体育的内容</a></li>
    </ul>
    <ul id="c3">
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    <li><a href="#">热门娱乐的内容</a></li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    //欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    var myTitle = document.getElementById("mytit");
    myTitle.innerHTML += myTitle.innerHTML;
    var lists = myTitle.getElementsByTagName("li");
    var num = lists.length - 2;
    //alert(num)
    myTitle.style.width = (num+1) * 92;//计算标题的总长度
    var ele = document.getElementById("tit_l");
    var w = ele.clientWidth;
    var n = 18;
    var t = 40;//数值越小,速度越快
    var times = new Array(n);
    var k = 0;
    var l = 0;
    yahooo(0);
    function yahooo(s)
    {
    if(k >= num && s > 0)
    {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    ele.scrollLeft = w;
    k = 1;
    }
    if(k < 1 && s < 0)
    {
    ele.scrollLeft = (num-1) * w;
    k = num-1;
    }
    k += s;
    var x = ele.scrollLeft;
    var d = k * w - x;
    for(i=0;i<n;i++)
    (
    function()
    {
    if(times[i]) {clearTimeout(times[i])} ;
    var j = i;
    times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
    }
    )();
    }
    var imgs = document.getElementById("tit_r").getElementsByTagName("img");
    var c1 = document.getElementById("c1");
    var c2 = document.getElementById("c2");
    var c3 = document.getElementById("c3");
    imgs[0].onclick = function()
    {
    yahooo(-1);
    if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
    if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
    if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
    }
    imgs[1].onclick = function()
    {
    yahooo(1);
    if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}
    if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}
    if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    </script>
    </body>
    </html>

  • 相关阅读:
    Windows access Linux / Ubuntu via Remote Desktop via xrdp
    Difference between model.evaluate vs model.predict in Keras
    Ubuntu pydot failed to call GraphViz.Please install GraphViz 解决方法
    体验godaddy域名转入,添加A记录,及使用dnspod的NS
    安装SQL Server 2008,一直要求重启电脑的解决办法
    在线网站探测工具-阿里测
    iis日志分析软件及大文本切割软件下载
    C# web服务器被webbench攻击及目现采用的防御措施
    C# iframe session 丢失
    C# CashCode项目开发
  • 原文地址:https://www.cnblogs.com/skyay/p/3826132.html
Copyright © 2011-2022 走看看