zoukankan      html  css  js  c++  java
  • jQuery仿FLASH响应鼠标滚动的动感菜单

    代码简介:

    响应鼠标滚动的一款jQuery动感菜单,横向竖向这个大家怎么改吧,使用了jquery插件,不要忘记载入哦。看效果的时候如果加载有错误,请刷新一下页面就行了。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jQuery仿FLASH响应鼠标滚动的动感菜单_网页代码站(www.webdm.cn)</title>
    <style>
    ul#topnav {
         margin: 15px 0 50px 0;
         padding: 0;
         list-style: none;
         float: left;
         font-size: 1.1em;
    }
    ul#topnav li {
         margin: 0;
         padding: 0;
         overflow: hidden;
         float: left;
         height: 40px;
    }
    ul#topnav li.home {
          75px;
    }
    ul#topnav li.Rss {
          75px;
    }
    ul#topnav li.Portfolio {
          105px;
    }
    ul#topnav li.Blog {
          75px;
    }
    ul#topnav li.About {
          80px;
    }
    ul#topnav li.Contact {
          95px;
    }
    ul#topnav a, ul#topnav span {
         padding: 10px 20px;
         float: left;
         text-decoration: none;
         color: #fff;
         background: url(http://www.webdm.cn/images/20101207/2/a_bg.gif) repeat-x;
         text-transform: uppercase;
         clear: both;
          100%;
         height: 20px;
         line-height: 20px;
    }
    ul#topnav a{
         color: #555;
         background-position: left bottom;
    }
    ul#topnav span { 
         background-position: left top;
    }
    ul#topnav.v2 span {
         background: transparent url(http://www.webdm.cn/images/20101207/2/a_bg.gif) repeat-x left top;
    }
    ul#topnav.v2 a {
         background: transparent url(http://www.webdm.cn/images/20101207/2/a_bg.gif) repeat-x left bottom;
         color: #555;
    }
    </style>
    <script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>
    </head>
    <script>
    $(document).ready(function() {
    $("#topnav li").prepend("<span></span>");
    $("#topnav li").each(function() {
    var linkText = $(this).find("a").html();
    $(this).find("span").show().html(linkText); //Add the text in the <span> tag
    }); 
    $("#topnav li").hover(function() { //On hover...
    $(this).find("span").stop().animate({
    marginTop: "-40" //Find the <span> tag and move it up 40 pixels
    }, 250);
    } , function() { //On hover out...
    $(this).find("span").stop().animate({
    marginTop: "0" //Move the <span> back to its original state (0px)
    }, 250);
    });
    });
    </script>
    <body>
    
    <ul id="topnav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Rss</a></li>
    </ul>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    </body>
    </html>
    代码来自:http://www.webdm.cn/webcode/d0954ee5-fbe6-49be-8eb7-4b84e16c629c.html
    
  • 相关阅读:
    HTML知识点总结之table
    HTML知识点总结之表单元素
    HTML知识点总结之div、section标签
    使用js脚本批量下载慕课网视频
    一种table超出高度自动出滚动条的解决方案
    C#算法之判断一个字符串是否是对称字符串
    强强联合之jquery操作angularjs对象
    锋利的js之验证身份证号
    锋利的js前端分页之jQuery
    超高性能的json序列化之MVC中使用Json.Net
  • 原文地址:https://www.cnblogs.com/webdm/p/2102839.html
Copyright © 2011-2022 走看看