jquery自动缩放菜单特效代码

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

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

以下是 jquery自动缩放菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>jquery自动缩放菜单</title>
    <link href="zzsc.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="stripes" style="position: absolute; left: 89px; top: 0px; height: 567px; width: 1243px">
        <div id="one">
            <span class="title">Design, graphic<br> & usability</span>
        </div>
        <div id="two">
            <span class="title short">Development</span>
            <div class="arrow"></div>
        </div>
        <div id="three">
            <span class="title">Chroma keying <br>& video</span>
        </div>
        <div id="four">
            <span class="title short">Games</span>
        </div>
    </div>
    <script src="zzsc.js" type="text/javascript"></script>
</body>
</html>

JS代码(zzsc.js):

$("div.stripes > div").mouseenter(function(){
	$(this).stop(true,true).css("width","40%").siblings().css("width","20%");
}
).mouseleave(function(){
	$(this).stop(true,true).css("width","25%").siblings().css("width","25%");
}
);

CSS代码(zzsc.css):

.stripes{z-index:10;width:100%;height:100%;position:absolute;background:#000;top:0px;left:0px;overflow:hidden;}
.title{font:bold 24px Helvetica,Arial,sans-serif;text-transform:uppercase;display:block;width:100%;position:absolute;top:80%;}
.short{padding-top:15px;}
#one{background:url("img/bg1.png") #8d48ed;}
#two{background:url("img/bg2.png") #08a3ca;}
#three{background:url("img/bg3.png") #94b804;}
#four{background:url("img/bg4.png") #eb281d;}
#one,#two,#three,#four{position:relative;color:#fff;display:block;width:25%;height:100%;float:left;text-align:center;-webkit-transition:all 0.3s;transition:all 0.3s;moz-transition:all 0.3s;background-repeat:no-repeat;background-size:100%;background-position:right 40px center;}

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