jquery带图标横向拉开菜单特效代码

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

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

以下是 jquery带图标横向拉开菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery带图标横向拉开菜单</title>
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen">
    <script type="text/javascript" src="javascript/jquery-1.2.3.js"></script>
    <script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="javascript/jquery.kwicks-1.5.1.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            $('.kwicks').kwicks({
                max: 200,
                duration: 800,
                easing: 'easeOutQuint'
            });
        });
    </script>
</head>
<body>
    <div class="kwicks_container">
        <ul class="kwicks">
            <li id="kwick_1">
                <a href="http://aext.net/">
                    Home
                    <h3>Front page</h3>
                </a>
            </li>
            <li id="kwick_2">
                <a href="http://www.baidu.com/">
                    CSS & XHTML
                    <h3>Makeup web page</h3>
                </a>
            </li>
            <li id="kwick_3">
                <a href="http://www.baidu.com/">
                    Java
                    <h3>Learning Java</h3>
                </a>
            </li>
            <li id="kwick_4">
                <a href="http://www.baidu.com/">
                    Others
                    <h3>In the other hand</h3>
                </a>
            </li>
            <li id="kwick_5">
                <a href="http://www.baidu.com/">
                    PHP
                    <h3>PHP Programming</h3>
                </a>
            </li>
            <li id="kwick_6">
                <a href="http://www.baidu.com/">
                    Resources
                    <h3>Resources for Web Developers</h3>
                </a>
            </li>
            <li id="kwick_7">
                <a href="http://www.baidu.com/">
                    Themes
                    <h3>Bloggers - Wordpress Themes</h3>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

JS代码(jquery.kwicks-1.5.1.js):

/*Kwicks for jQuery (version 1.5.1)Copyright (c) 2008 Jeremy Martinhttp://www.jeremymartin.name/projects.php?project=kwicksLicensed under the MIT license:http://www.opensource.org/licenses/mit-license.phpAny and all use of this script must be accompanied by this copyright/license notice in its present form.*/
(function($){
	$.fn.kwicks = function(options){
	var defaults ={
	isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500}
;
	var o = $.extend(defaults,options);
	var WoH = (o.isVertical ? 'height':'width');
	// WoH = Width or Heightvar LoT = (o.isVertical ? 'top':'left');
	// LoT = Left or Topreturn this.each(function(){
	container = $(this);
	var kwicks = container.children('li');
	var normWoH = kwicks.eq(0).css(WoH).replace(/px/,'');
	// normWoH = Normal Width or Heightif(!o.max){
	o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
}
else{
	o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
}
// set width of container ulif(o.isVertical){
	container.css({
	width:kwicks.eq(0).css('width'),height:(normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'}
);
}
else{
	container.css({
	width:(normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',height:kwicks.eq(0).css('height')}
);
}
// pre calculate left or top values for all kwicks but the first and last// i = index of currently hovered kwick,j = index of kwick we're calculatingvar preCalcLoTs = [];
	// preCalcLoTs = pre-calculated Left or Top'sfor(i = 0;
	i < kwicks.size();
	i++){
	preCalcLoTs[i] = [];
	// don't need to calculate values for first or last kwickfor(j = 1;
	j < kwicks.size() - 1;
	j++){
	if(i == j){
	preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing):j * o.min + (j * o.spacing);
}
else{
	preCalcLoTs[i][j] = (j <= i ? (j * o.min):(j-1) * o.min + o.max) + (j * o.spacing);
}
}
}
// loop through all kwick elementskwicks.each(function(i){
	var kwick = $(this);
	// set initial width or height and left or top values// set first kwickif(i === 0){
	kwick.css(LoT,'0px');
}
// set last kwickelse if(i == kwicks.size() - 1){
	kwick.css(o.isVertical ? 'bottom':'right','0px');
}
// set all other kwickselse{
	if(o.sticky){
	kwick.css(LoT,preCalcLoTs[o.defaultKwick][i]);
}
else{
	kwick.css(LoT,(i * normWoH) + (i * o.spacing));
}
}
// correct size in sticky modeif(o.sticky){
	if(o.defaultKwick == i){
	kwick.css(WoH,o.max + 'px');
	kwick.addClass('active');
}
else{
	kwick.css(WoH,o.min + 'px');
}
}
kwick.css({
	margin:0,position:'absolute'}
);
	kwick.bind(o.event,function(){
	// calculate previous width or heights and left or top valuesvar prevWoHs = [];
	// prevWoHs = previous Widths or Heightsvar prevLoTs = [];
	// prevLoTs = previous Left or Topskwicks.stop().removeClass('active');
	for(j = 0;
	j < kwicks.size();
	j++){
	prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/,'');
	prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/,'');
}
var aniObj ={
}
;
	aniObj[WoH] = o.max;
	var maxDif = o.max - prevWoHs[i];
	var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
	kwick.addClass('active').animate(aniObj,{
	step:function(now){
	// calculate animation completeness as percentagevar percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio:1;
	// adjsut other elements based on percentagekwicks.each(function(j){
	if(j != i){
	kwicks.eq(j).css(WoH,prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
}
if(j > 0 && j < kwicks.size() - 1){
	// if not the first or last kwickkwicks.eq(j).css(LoT,prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
}
}
);
}
,duration:o.duration,easing:o.easing}
);
}
);
}
);
	if(!o.sticky){
	container.bind("mouseleave",function(){
	var prevWoHs = [];
	var prevLoTs = [];
	kwicks.removeClass('active').stop();
	for(i = 0;
	i < kwicks.size();
	i++){
	prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/,'');
	prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/,'');
}
var aniObj ={
}
;
	aniObj[WoH] = normWoH;
	var normDif = normWoH - prevWoHs[0];
	kwicks.eq(0).animate(aniObj,{
	step:function(now){
	var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif:1;
	for(i = 1;
	i < kwicks.size();
	i++){
	kwicks.eq(i).css(WoH,prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
	if(i < kwicks.size() - 1){
	kwicks.eq(i).css(LoT,prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
}
}
}
,duration:o.duration,easing:o.easing}
);
}
);
}
}
);
}
;
}
)(jQuery);

CSS代码(style.css):

body,h3,div,ul,p{margin:0;padding:0;}
body{background-color:#FFFF99;line-height:18px;}
div.kwicks_container{width:840px;margin:100px auto 0 auto;}
/*-------------------------KWICKS--------------------*/
.kwicks{list-style:none;position:relative;margin:0;padding:0;width:840px;height:50px;z-index:2;}
.kwicks li{display:block;float:left;overflow:hidden;padding:0;cursor:pointer;width:100px;height:35px;z-index:2;cursor:pointer;border-left-width:1px;border-left-style:solid;border-left-color:#FF9933;}
.kwicks li a{background-image:url(images/sprites_menu.png);background-repeat:no-repeat;font-family:"Lucida Grande","Lucida Sans Unicode",Arial;font-size:14px;letter-spacing:-0.07em;color:#AA0000;height:40px;outline:none;display:block;z-index:100;cursor:pointer;text-transform:uppercase;font-weight:bold;margin-top:-3px;margin-left:5px;text-decoration:none;}
.kwicks li h3{position:absolute;width:120px;font-family:"Lucida Grande","Lucida Sans Unicode",Arial;font-size:10px;color:#FF6600;letter-spacing:-0.02em;outline:none;z-index:0;cursor:pointer;text-transform:uppercase;font-weight:normal;margin-left:5px;text-decoration:none;left:0px;top:15px;right:0px;bottom:0px;}
#kwick_1,#kwick_2,#kwick_3,#kwick_4,#kwick_5,#kwick_6,#kwick_7{margin:0pt;overflow:hidden;position:absolute;display:block;width:120px;}
#kwick_1{left:0px;border:none;}
#kwick_2{left:120px;}
#kwick_3{left:240px;}
#kwick_4{left:360px;}
#kwick_5{left:480px;}
#kwick_6{left:600px;}
#kwick_7{right:0px;}
#kwick_1 a{background-position:0px 0px;}
.kwicks a:hover,.kwicks #active{color:#3399FF;}
.kwicks li a:hover h3,.kwicks li #active h3{color:#999999;}
#kwick_2 a{background-position:0px -50px;}
#kwick_3 a{background-position:0px -192px;}
#kwick_4 a{background-position:0px -100px;}
#kwick_5 a{background-position:0px -150px;}
#kwick_6 a{background-position:0px -250px;}
#kwick_7 a{background-position:0px -300px;}

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