jquery css3随机掉落旋转菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery css3随机掉落旋转菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Smart Bottom Slide Out Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Smart Bottom Slide Out Menu" />
        <meta name="keywords" content="jquery, fancy, bottom, navigation, menu" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
    </head>

    <body>
        <div id="header"></div>

        <div id="content">
            <div id="home" class="text">
                <h1>Amazing grungy slide out stuff</h1>
                <p>This is an example of some text!</p>
                <p>If anybody looks at a picture by Claude Monet from the point of view of
                    a Raphael, he will see nothing but a meaningless jargon of wild
                    paint-strokes. And if anybody looks at a Raphael from the point of view
                    of a Claude Monet, he will, no doubt...</p>
            </div>
            <div id="about" class="text" style="display:none;">
                <h1>Some amazing about section</h1>
                <p>This is an example of some text!</p>
                <p>In tone drawing there is not only the shape of the masses to be
                    considered, but their values--that is, their position in an imagined
                    scale from dark to light. The relation of the different tones in this
                    way--the values, as it is called--is an extremely important matter in
                    painting.</p> 
            </div>
            <div id="search" class="text" style="display:none;">
                <h1>Search the world!</h1>
                <p>This is an example of some text!</p>
                <p><label for="searchinput">Search for:</label><input type="text"/></p>
            </div>
            <div id="photos" class="text" style="display:none;">
                <h1>Some awesome photos</h1>
                <p>This is an example of some text!</p>
                <p>
					<img alt="img" src="img1.png" width="170" height="120"/>
					<img alt="img" src="img1.png" width="170" height="120"/>
					<img alt="img" src="img1.png" width="170" height="120"/>
				</p>
            </div>
            <div id="contact" class="text" style="display:none;">
                <h1>Get in touch</h1>
                <p>This is an example of some text!</p>
                <p>Some contact details...</p>
            </div>
        </div>
        <ul id="navigation">
            <li class="home"><a title="Home">Home</a></li>
            <li class="about"><a title="About">About</a></li>
            <li class="search"><a title="Search">Search</a></li>
            <li class="photos"><a title="Photos">Photos</a></li>
            <li class="contact"><a title="Contact">Contact</a></li>
        </ul>

        <div class="info">
            <a class="back" href="">back to Codrops</a>
        </div>

        <!-- The JavaScript -->
		<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    var $this = $(this);
					var r=Math.floor(Math.random()*41)-20;
                    $this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
                    $('#content').css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
                    $this.stop().animate({
                        'marginTop':'-70px'                       
                    },d+=150);
                });
                $('#navigation > li').hover(
					function () {
						var $this = $(this);
						$('a',$this).stop().animate({
							'marginTop':'-40px'
						},200);
					},
					function () {
						var $this = $(this);
						$('a',$this).stop().animate({
							'marginTop':'-70px'
						},200);
					}
				).click(function(){
					var $this = $(this);
					var name = this.className;
					$('#content').animate({marginTop:-600}, 300,function(){
						var $this = $(this);
						var r=Math.floor(Math.random()*41)-20;
						$this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
						$('#content div').hide();
						$('#'+name).show();	
						$this.animate({marginTop:-200}, 300); 
					})		 
				});
            });
        </script>
    </body>
</html>

CSS代码(style.css):

*{margin:0;padding:0;}
body{font-family:Cambria,serif;font-size:18px;font-style:normal;font-weight:normal;letter-spacing:normal;line-height:1.4em;text-transform:uppercase;background:transparent url(bgbody.jpg) repeat top left;}
.info a.back{position:absolute;bottom:20px;left:10px;text-decoration:none;color:#603d05;text-shadow:1px 1px 1px #fff;font-weight:bold;}
.info a.back:hover{color:#000;}
#header{position:absolute;top:0px;left:0px;width:180px;height:395px;background:transparent url(title.png) no-repeat top left;}
#content{width:824px;height:600px;margin:-200px auto 0px auto;background:transparent url(bg.gif) no-repeat bottom left;}
#content h1{color:#7F6137;text-shadow:1px 1px 1px #fff;}
#content p{margin:20px;width:600px;}
#content .text{padding:300px 0px 0px 100px;}
ul#navigation{position:fixed;margin:0px;padding:0px;top:0px;right:200px;list-style:none;z-index:999999;}
ul#navigation li{display:inline;float:left;width:100px;margin-left:1px;}
ul#navigation li a{display:block;font-weight:bold;text-shadow:1px 1px 1px #fff;float:left;width:100px;height:35px;color:#603d05;background:transparent url(item.png) no-repeat bottom right;text-decoration:none;text-align:center;padding-top:80px;margin-top:-40px;cursor:pointer;}
ul#navigation li a:hover{}

附件:下载该文件资源,减少时间成本(增值服务)