jQuery渐变图钉分层菜单特效代码

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

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

以下是 jQuery渐变图钉分层菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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渐变图钉分层菜单</title>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/boxymenu.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/boxymenu.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu-wrapper').boxymenu();
        });
    </script>
    <style type="text/css">
        .demobar {
            height: 90px;
            line-height: 90px;
        }

        .demobar .fleft {
            float: left;
            margin-left: 10px;
        }

        .demobar .fright {
            float: right;
            margin-top: 14px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <br />
    <div id="menu-wrapper">
        <ul class="boxy-menu">
            <li>
                <div class="boxy-menu-item-top">
                    Inline Content
                </div>
                <div class="boxy-menu-item-bottom">
                    <ul class="items">
                        <li>
                            <a href="http://www.baidu.com/"
                               target="_blank">Smart Preloader</a>
                        </li>
                        <li><a href="#" target="_blank">Second Link Here </a></li>
                        <li><a href="#" target="_blank">Third Link Here </a></li>
                        <li><a href="#" target="_blank">Fourth Link Here </a></li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="boxy-menu-item-top">
                    Portfolio
                </div>
                <div class="boxy-menu-item-bottom">
                    <ul class="items">
                        <li><a href="#" target="_blank">Credit Card Validation </a></li>
                        <li><a href="#" target="_blank">Content Carousels </a></li>
                        <li>
                            <a href="http://www.baidu.com/"
                               target="_blank">Smart Paginator</a>
                        </li>
                        <li><a href="#" target="_blank">Vertical News Slider </a></li>
                        <li><a href="#" target="_blank">jQuery Pagination Plugin </a></li>
                        <li><a href="#" target="_blank">Lightweight Tooltips</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="boxy-menu-item-top">
                    Useful
                </div>
                <div class="boxy-menu-item-bottom">
                    <ul class="items">
                        <li>
                            <a href="http://www.baidu.com/" target="_blank">
                                Setup Web SVN Server
                            </a>
                        </li>
                        <li><a href="#" target="_blank">Second Link Here </a></li>
                        <li><a href="#" target="_blank">Third Link Here </a></li>
                        <li><a href="#" target="_blank">Fourth Link Here </a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <br />
    <br />
    <br />
    <div id="inline-content">
    </div>
</body>
</html>

JS代码(boxymenu.js):

(function ($){
	$.fn.extend({
	boxymenu:function (options){
	var settings = $.extend({
	menuItemWidth:200,menuItemHeight:150,boxHorizontal:4,boxVertical:3,loadAnimationSpeed:400,itemDisplaySpeed:1000}
,options);
	return this.each(function (){
	var frameWidth = settings.menuItemWidth;
	var frameHeight = settings.menuItemHeight;
	var timeFactor;
	var animationSpeed = settings.loadAnimationSpeed;
	var rows = settings.boxVertical;
	var cols = settings.boxHorizontal;
	var speed = settings.itemDisplaySpeed;
	//load animation var coordinates = new Array();
	var isAnimating = false;
	var wrapper = $(this);
	//hide all elements on load setTimeout(function (){
	//make clone of each item $('.boxy-menu>li',wrapper).each(function (){
	animateRandomFade($(this));
}
);
	var h = $('.boxy-menu li:first',wrapper).outerHeight();
	$('.boxy-menu>li',wrapper).append('<div class="btn-pin" title="Pin Menu"></div>');
	$('.boxy-menu>li .btn-pin',wrapper).toggle(function (){
	$(this).addClass('pinned');
	$(this).data('pinned',true);
	$(this).attr('title','Unpin Menu');
}
,function (){
	$(this).removeClass('pinned');
	$(this).data('pinned',false);
	$(this).attr('title','Pin Menu');
}
).hover(function (){
	if (!$(this).data('pinned')) $(this).addClass('pinned');
}
,function (){
	if (!$(this).data('pinned')) $(this).removeClass('pinned');
}
);
	$('.boxy-menu>li',wrapper).mouseenter(function (){
	if (!$(this).find('.btn-pin').hasClass('pinned')){
	$(this).find('.btn-pin').css('display','block');
	$(this).find('.boxy-menu-item-top').stop(false,false).animate({
	marginTop:-h}
,speed,function (){
	isAnimating = false;
}
);
}
}
).mouseleave(function (){
	if (!$(this).find('.btn-pin').hasClass('pinned')){
	$(this).find('.btn-pin').css('display','none');
	$(this).find('.boxy-menu-item-top').stop(false,false).animate({
	marginTop:0}
,speed,function (){
	isAnimating = false;
}
);
}
}
);
	function createBoxes(container){
	container.data('coordinates',new Array());
	container.data('complete',0);
	var w = frameHeight / rows;
	var h = frameWidth / cols;
	if (w % 10 > 0){
	w = parseInt(w);
	w++;
}
if (h % 10 > 0){
	h = parseInt(h);
	h++;
}
var totalBoxes = cols * rows;
	timeFactor = animationSpeed / totalBoxes;
	for (var i = 0;
	i < rows;
	i++){
	for (var j = 0;
	j < cols;
	j++){
	var box = $('<div/>').css({
	'width':w + 'px','height':h + 'px','top':(i * h) + 'px','left':(j * w) + 'px','position':'absolute'}
).addClass('boxy-el').addClass('boxy-piece').hide();
	container.append(box);
}
}
$(".boxy-el",container).each(function (index){
	var pos ={
	left:$(this).css('left'),top:$(this).css('top')}
;
	container.data('coordinates').push(pos);
}
);
	var randomElements = $(".boxy-el",container).get().sort(function (){
	return Math.round(Math.random()) - 0.5}
);
	container.data('elements',randomElements);
}
function animateRandomFade(container){
	createBoxes(container);
	var factor = 0;
	$(container.data('elements')).each(function (index){
	if (container.data('complete') < container.data('elements').length){
	var el = $(this);
	setTimeout(function (){
	try{
	el.fadeIn(animationSpeed,function (){
	var complete = container.data('complete');
	complete++;
	container.data('complete',complete) if (complete == container.data('elements').length){
	animationComplete(container);
}
}
);
}
catch (ex){
}
}
,factor);
	factor += timeFactor + 20;
}
}
);
}
function animationComplete(container){
	container.find('.boxy-menu-item-top,.boxy-menu-item-bottom').fadeIn(0);
	container.addClass('menuitem');
	container.find('.boxy-el').remove();
}
}
,100);
}
);
}
}
);
}
)(jQuery);

CSS代码(boxymenu.css):

.btn-pin{position:absolute;top:10px;left:87%;display:none;width:20px;height:20px;background:url(../images/pin.png) no-repeat;}
.pinned{background:url(../images/pin-hover.png) no-repeat;}
.boxy-piece{background-color:#FFD600;}
.boxy-menu{/*width:1024px;*/
 height:150px;list-style:none;margin:0;padding:0;margin-left:18px;margin-top:24px;margin:0 auto;width:800px;}
.boxy-menu.hidden > li{border:none;display:none !important;}
.boxy-menu > li{margin:0;padding:0;width:200px;height:150px;display:inline;float:left;font-family:Arial;margin:25px;overflow:hidden;cursor:pointer;position:relative;}
.boxy-menu > li.menuitem{background-color:#FFD600;}
.boxy-menu-item-top{color:#443901;font-weight:bold;font-size:24px;line-height:150px;text-align:center;-webkit-text-shadow:1px 1px 2px #ffffff;/* Saf3-4,iOS 4.0.2 - 4.2,Android 2.3+ */
 -moz-text-shadow:1px 1px 2px #ffffff;/* FF3.5 - 3.6 */
 text-shadow:1px 1px 2px #ffffff;/* Opera 10.5,IE9,FF4+,Chrome 6+,iOS 5 */
 display:none;}
.boxy-menu-item-bottom{display:none;}

CSS代码(demo.css):

body{background-image:url(../images/grid.png);}
.items{margin:0;padding:0;list-style:none;margin-top:16px;margin-left:20px;}
.items li{text-align:left;font-size:11px !important;padding-top:3px;padding-bottom:3px;font-weight:bold;}
.items li a,.items li a:visited,.items li a:active{color:#443901;text-decoration:none;}
.items li a:hover{/*text-decoration:underline;*/
 color:#7C6300;-webkit-text-shadow:1px 1px 2px #ffffff;/* Saf3-4,iOS 4.0.2 - 4.2,Android 2.3+ */
 -moz-text-shadow:1px 1px 2px #ffffff;/* FF3.5 - 3.6 */
 text-shadow:1px 1px 2px #ffffff;/* Opera 10.5,IE9,FF4+,Chrome 6+,iOS 5 */
}
#inline-content{height:100px;margin-top:100px;margin:0 auto;color:#000;font-size:50px;font-weight:bold;text-align:center;}

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