欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

超炫的jquery仿flash導(dǎo)航欄特效

 更新時(shí)間:2014年11月11日 16:08:40   投稿:hebedich  
推薦給大家一款jQuery實(shí)現(xiàn)的仿FLASH超炫的導(dǎo)航特效代碼,有需要的小伙伴直接拿走吧

FLASH導(dǎo)航現(xiàn)在基本上已經(jīng)是過時(shí)了,但是我們可以用jQuery來實(shí)現(xiàn)flash效果,非常的不錯(cuò)。

演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

復(fù)制代碼 代碼如下:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>demo01</title> 
    <link rel="stylesheet" type="text/css" href="demo.css"> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="demo.js"></script> 
</head> 
<body> 
        <div id="main"> 
        <div class="menu"> 
            <div class="menu_b back1"></div> 
            <span>測試</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back2"></div> 
            <span>測試</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back3"></div> 
            <span>測試</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back4"></div> 
            <span>測試</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back5"></div> 
            <span>測試</span> 
        </div> 
        <div class="menu"> 
            <div class="menu_b back6"></div> 
            <span>測試</span> 
        </div> 
        </div> 
</body> 
</html> 

 
復(fù)制代碼 代碼如下:

$(document).ready(function(){ 
    $(".menu").mouseover(function(){ 
        var div = $(this).children(".menu_b"); 
        var span = $(this).children("span"); 
        //隱藏字體,往右移動(dòng)20px 
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); 
        //顯示背景動(dòng)畫 
        div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300); 
        div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300); 
        //顯示字體,往左移動(dòng)20px 
        span.animate({opacity:'1',left:'0px'},300); 
        span.css({color:'#FFF'}); 
    }); 
 
    $(".menu").mouseout(function(){ 
        var div = $(this).children(".menu_b"); 
        var span = $(this).children("span"); 
        //隱藏字體,往左移動(dòng)20px 
        span.stop(true,false).animate({opacity:'0',left:'20px'},200); 
        //顯示背景動(dòng)畫 
        div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300); 
        div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300); 
        //顯示字體,往右移動(dòng)20px 
        span.animate({opacity:'1',left:'0px'},300); 
        span.css({color:'#777'}); 
    }); 
}); 

 動(dòng)畫效果是我根據(jù)自己的喜好來寫的,喜歡的可以自己更改特效。。

復(fù)制代碼 代碼如下:

/* demo01 css */ 
#main{ 
    background: #EEE; 
    display: inline-block; 
    padding: 10px; 

.menu{position: relative; 
    width: 100px; 
    height: 40px; 
    margin: 10px auto; 

 
.menu_b{ 
    position: absolute; 
    width: 0px; 
    height: 0px; 
    background: red; 
    z-index: 1px; 
    top: 50%; 
    left: 50%; 

.menu span{ 
    position: inherit; 
    display: block; 
    text-align: center; 
    line-height: 40px; 
    z-index: 3px; 
    font-size: 14px; 
    font-family: "Microsoft Yahei"; 
    color: #777; 
    cursor: pointer; 

.back1{ 
    background: #FF0000; 

.back2{ 
    background: #921AFF; 

.back3{ 
    background: #00CACA; 

.back4{ 
    background: #00DB00; 

.back5{ 
    background: #FF5809; 

.back6{ 
    background: #E1E100; 

代碼很簡單,使用也很簡單,就包括修改都簡單,小伙伴們自己看著辦吧

相關(guān)文章

  • jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享

    jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享

    這篇文章主要介紹了jquery實(shí)現(xiàn)的帶有索引按鈕且自動(dòng)輪播切換特效,圖片簡單大方,感興趣的小伙伴可以參考下。
    2015-09-09
  • jQuery+html5+css3實(shí)現(xiàn)圓角無刷新表單帶輸入驗(yàn)證功能代碼

    jQuery+html5+css3實(shí)現(xiàn)圓角無刷新表單帶輸入驗(yàn)證功能代碼

    這篇文章主要介紹了jQuery+html5+css3實(shí)現(xiàn)圓角無刷新表單帶輸入驗(yàn)證功能代碼,加入了html5與css3技術(shù),使得整個(gè)表單效果更加唯美華麗,需要的朋友可以參考下
    2015-08-08
  • jQuery中addClass()方法用法實(shí)例

    jQuery中addClass()方法用法實(shí)例

    這篇文章主要介紹了jQuery中addClass()方法用法,實(shí)例分析了addClass()方法的功能、定義及向匹配元素添加一個(gè)或多個(gè)類的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法

    jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法

    這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法,涉及jquery通過定時(shí)器采用Ajax方法讀取并處理XML文件的相關(guān)技巧,需要的朋友可以參考下
    2015-07-07
  • JQuery for與each性能比較分析

    JQuery for與each性能比較分析

    性能優(yōu)化遇到很多細(xì)節(jié)問題(for與each性能比較)記錄下來分享給大家,希望對你有所幫助
    2013-05-05
  • jQuery實(shí)現(xiàn)簡單五子棋游戲

    jQuery實(shí)現(xiàn)簡單五子棋游戲

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • jquery實(shí)現(xiàn)直播彈幕效果

    jquery實(shí)現(xiàn)直播彈幕效果

    這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)直播彈幕效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • jqNext能替代jQuery嗎

    jqNext能替代jQuery嗎

    隨著前端的發(fā)展和瀏覽器的升級,jQuery也開始有些缺陷,其中最主要的就是在處理大量數(shù)據(jù)時(shí)會(huì)出現(xiàn)性能問題,而為了解決這個(gè)問題,我們可以使用jqNext,這是jQuery的一個(gè)輕量級替代品,盡管它并不能完全取代jQuery,但在一些場景下使用起來是十分便利的
    2023-09-09
  • jQuery 中ajax異步調(diào)用的四種方式

    jQuery 中ajax異步調(diào)用的四種方式

    這篇文章主要介紹了jQuery 中ajax異步調(diào)用的四種方式,實(shí)例講解,需要的朋友可以參考下。
    2016-06-06
  • jQuery彈出下拉列表插件(實(shí)現(xiàn)kindeditor的@功能)

    jQuery彈出下拉列表插件(實(shí)現(xiàn)kindeditor的@功能)

    這篇文章主要介紹了jQuery彈出下拉列表插件(實(shí)現(xiàn)kindeditor的@功能)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-08-08

最新評論