中尉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>木质风格鼠标经过弹出下拉的jquery导航菜单 by 25175</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<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>
<div style="width:550px;margin:20px auto;">
<p><strong><a href="http://www.25175.com" target="_blank">25175</a></strong> </p>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/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>
|
|
木质风格鼠标经过弹出下拉的jquery导航菜单
分享到：
 购买记录    其他最新源码
       
|
新兵
