jQuery copy Flash scroll up and down the Chinese and English navigation menu example

2020-05-12 02:08:50
OfStack

The example of this article describes the method of jQuery imitating Flash to flip up and down the navigation menu in Chinese and English. Share with you for your reference. The specific implementation method is as follows:



<!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 imitation Flash Mouse-sensitive scrolling navigation menu </title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">

body{width:100%;height:100%;margin:0;padding:0;background:url(/jscss/demoimg/201007/bg.gif) repeat-x top center;font-size:12px;color:#616161;}

a,a:link,a:visited,a:active{color:#616161;text-decoration:none;}

a:hover{text-decoration:underline;color:#710075;}

#body{ width:100%;float:left;}

.index_top{width:930px;height:126px;position:relative;z-index:1;}

no-repeat 0 0;position:absolute;top:46px;left:41px;z-index:50;}

#index_nav{margin:82px 0;float:left;display:inline;}

#index_nav ul{float:left;height:34px;display:inline;margin:0 0 0 0px;list-style-type:none;}

#index_nav li{float:left;height:34px;width:100px;font-size:13px;font-family:Verdana;line-height:34px;text-align:center;cursor:pointer;color:#fff;}

#index_nav_cases a,#index_nav_cases a:link,#index_nav_cases a:visited,#index_nav_cases a:active{color:#fff;}

#index_nav_cases a:hover{text-decoration:none;}

#index_nav li div{height:34px;width:100px;overflow:hidden;position:relative;}

#index_nav li div .n1,#index_nav li div .n2{display:block;height:34px;width:100px;position:absolute;top:0px;left:0px;cursor:pointer;}

#index_nav li div .n1{z-index:12;background:url(/jscss/demoimg/201007/nav_bg.gif) repeat-x top center;font-size:13px;}

#index_nav li div .n2{z-index:11;background:url(/jscss/demoimg/201007/nav_bg.gif) repeat-x top center;}

#index_nav li div a{color:#fff;}

#index_nav li div a:hover{text-decoration:none;}

</style>

<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>

<script type="text/javascript"> 

jQuery(function(){

    jQuery('#index_nav li').hover(

        function(){

            jQuery(this).find('.n1').stop().animate({opacity:'0',top:'43px'});

        },

        function(){

            jQuery(this).find('.n1').stop().animate({opacity:'1',top:'0px'});

        }

    );

});

</script>

</head>

<body>

<span style="color:#FFFFFF;"> Friendly hint: if the prompt page has error or can not see the effect, please refresh the page and try again! </span><br>

<div id="body">

    <div id="index_content">

        <div class="index_top">

            <div id="index_nav">

                <ul>

                    <li id="index_nav_about"><div><span class="n1"> guan   in </span><span class="n2">About</span></div></li>

                    <li id="index_nav_service"><div><span class="n1"> clothing   service </span><span class="n2">Services</span></div></li>

                    <li id="index_nav_cases"><div><a href="#"><span class="n1"> case   case </span><span class="n2">Cases</span></a></div></li>

                    <li id="index_nav_adva"><div><span class="n1"> optimal   potential </span><span class="n2">Advantages</span></div></li>

                    <li id="index_nav_contact"><div><span class="n1"> al   Department of </span><span class="n2">Contact</span></div></li>

                </ul>

            </div>

        </div>

    </div>

</div>

</body>

</html>

I hope this article is helpful for you to design jQuery program.