基本信息
源码名称：CSS3&jQuery创意盒子动画菜单 示例代码下载
源码大小：0.97M
文件格式：.zip
开发语言：CSS
更新时间：2017-06-25
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Little Boxes Menu with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Little Boxes Menu or Navigation with jQuery - radnomly animate the menu items to show content, accodion like boxes menu" />
<meta name="keywords" content="jquery, boxes, menu, navigation, animate"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
background:#E4FFCF url(wood.jpg) no-repeat top center;
font-family:Futura, "Century Gothic", AppleGothic, sans-serif;
overflow:hidden;
}
h1{
color:#fff;
margin:40px 0px 20px 40px;
text-shadow:1px 1px 1px #555;
font-weight:normal;
}
a.back{
position:absolute;
bottom:5px;
right:5px;
}
.reference{
position:absolute;
bottom:5px;
left:5px;
}
.reference p a, a.back{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:16px;
font-weight:bold;
}
.reference p a:hover, a.back:hover{
color:#000;
}
</style>
</head>
<body>
<div class="title">
<h1>Little Boxes Menu with jQuery</h1>
</div>
<div id="content">
<div class="reference">
<p><a href="http://www.flickr.com/photos/adforce1/">Photos from williamcho's photostream on Flickr</a></p>
</div>
<a class="back" href="http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery">Back to Codrops</a>
<div id="littleBoxes" class="littleBoxes">
<div class="boxlink bg1" style="top:0px;left:0px;">
<a href="">About</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></div>
<div class="bg5" style="background-position:-180px 0;top:0px;left:190px;"></div>
<div class="bg5" style="background-position:-270px 0;top:0px;left:285px;"></div>
<div class="bg5" style="background-position:0 -90px;top:95px;left:0px;"></div>
<div class="boxlink bg2" style="top:95px;left:95px;">
<a href="">Menu</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="bg5" style="background-position:-180px -90px;top:95px;left:190px;"></div>
<div class="bg5" style="background-position:-270px -90px;top:95px;left:285px;"></div>
<div class="bg5" style="background-position:0 -180px;top:190px;left:0px;"></div>
<div class="bg5" style="background-position:-90px -180px;top:190px;left:95px;"></div>
<div class="boxlink bg3" style="top:190px;left:190px;">
<a href="">Chef</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="bg5" style="background-position:-270px -180px;top:190px;left:285px;"></div>
<div class="bg5" style="background-position:0 -270px;top:285px;left:0px;"></div>
<div class="bg5" style="background-position:-90px -270px;top:285px;left:95px;"></div>
<div class="bg5" style="background-position:-180px -270px;top:285px;left:190px;"></div>
<div class="boxlink bg4" style="top:285px;left:285px;">
<a href="">Contact</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/* object to save the initial positions of each box */
var divinfo = {"initial": []};
/* index of the selected / clicked box */
var current = -1;
/* we save the index,top and left of each one of the boxes */
$('#littleBoxes > div').each(function(){
var $this = $(this);
var initial = {
'index' : $this.index(),
'top' : $this.css('top'),
'left' : $this.css('left')
};
divinfo.initial.push(initial);
});
/* clcik event for the anchors inside of the boxes */
$('#littleBoxes a').bind('click',function(e){
var $this = $(this);
var $currentBox = $this.parent();
/* set a z-index lower than all the other boxes,
to see the other boxes animation on the top*/
$currentBox.css('z-index','1');
/* if we are clicking on a expanded box : */
if(current == $currentBox.index()){
/* put it back (decrease width,height, and set the top and left like it was before).
the previous positions are saved in the divinfo obj*/
$currentBox.stop().animate({
'top' : divinfo.initial[$currentBox.index()].top,
'left' : divinfo.initial[$currentBox.index()].left,
'width' : '90px',
'height' : '90px'
},800,'easeOutBack').find('.boxcontent').fadeOut();
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
var elemTop = divinfo.initial[$ele.index()].top;
var elemLeft = divinfo.initial[$ele.index()].left;
$ele.stop().show().animate({
'top' : elemTop,
'left' : elemLeft,
'opacity' : 1
},800);
});
current = -1;
}
/* if we are clicking on a small box : */
else{
/* randomly animate all the other boxes.
Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
This range is considering the initial lefts/tops of the elements. It's not the exact right
range, since we would have to calculate the range based on each one of the boxes. Anyway, it
fits our needs...
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
$ele.stop().animate({
'top' : (Math.floor(Math.random()*601) - 150) 'px',
'left': (Math.floor(Math.random()*601) - 150) 'px',
'opacity':0
},800,function(){
$(this).hide();
});
});
/* expand the clicked one. Also, fadeIn the content (boxcontent)
if you want it to fill the space of the littleBoxes container,
then these are the right values */
var newwidth = 379;
var newheight = 379;
$currentBox.stop().animate({
'top' : '0px',
'left' : '0px',
'width' : newwidth 'px',
'height': newheight 'px'
},800,'easeOutBack',function(){
current = $currentBox.index();
$(this).find('.boxcontent').fadeIn();
});
}
e.preventDefault();
});
});
</script>
</body>
</html>