以下是 jquery圆角摇摆滚动菜单特效代码 的示例演示效果:
部分效果截图:
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="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
background:#f9f9f9;
}
.title{
width:703px;
height:144px;
position:absolute;
top:0px;
left:0px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
</style>
</head>
<body>
<div>
<div class="title"></div>
</div>
<div class="menu">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Contact us</h2>
<p>
<a href="#">eMail</a>
<a href="#">Twitter</a>
<a href="#">Facebook</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Help</h2>
<p>
<a href="#">FAQ</a>
<a href="#">Live Support</a>
<a href="#">Tickets</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Search</h2>
<p>
<input type="text"></input>
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Image Gallery</h2>
<p>
<a href="#">Categories</a>
<a href="#">Archives</a>
<a href="#">Featured</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Start from here</h2>
<p>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Pricing</a>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-css-transform.js" type="text/javascript"></script>
<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'268px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>
</body>
</html>
JS代码(jquery-animate-css-rotate-scale.js):
(function ($){
// Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS // scale and rotation independently. // 2009 Zachary Johnson www.zachstronaut.com var rotateUnits = 'deg';
$.fn.rotate = function (val){
var style = $(this).css('transform') || 'none';
if (typeof val == 'undefined'){
if (style){
var m = style.match(/rotate\(([^)]+)\)/);
if (m && m[1]){
return m[1];
}
}
return 0;
}
var m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
if (m){
if (m[3]){
rotateUnits = m[3];
}
$(this).css( 'transform',style.replace(/none|rotate\([^)]*\)/,'') + 'rotate(' + m[1] + rotateUnits + ')' );
}
}
// Note that scale is unitless. $.fn.scale = function (val,duration,options){
var style = $(this).css('transform');
if (typeof val == 'undefined'){
if (style){
var m = style.match(/scale\(([^)]+)\)/);
if (m && m[1]){
return m[1];
}
}
return 1;
}
$(this).css( 'transform',style.replace(/none|scale\([^)]*\)/,'') + 'scale(' + val + ')' );
}
// fx.cur() must be monkey patched because otherwise it would always // return 0 for current rotate and scale values var curProxied = $.fx.prototype.cur;
$.fx.prototype.cur = function (){
if (this.prop == 'rotate'){
return parseFloat($(this.elem).rotate());
}
else if (this.prop == 'scale'){
return parseFloat($(this.elem).scale());
}
return curProxied.apply(this,arguments);
}
$.fx.step.rotate = function (fx){
$(fx.elem).rotate(fx.now + rotateUnits);
}
$.fx.step.scale = function (fx){
$(fx.elem).scale(fx.now);
}
/* Starting on line 3905 of jquery-1.3.2.js we have this code:// We need to compute starting value if ( unit != "px" ){
self.style[ name ] = (end || 1) + unit;
start = ((end || 1) / e.cur(true)) * start;
self.style[ name ] = start + unit;
}
This creates a problem where we cannot give units to our custom animation because if we do then this code will execute and because self.style[name] does not exist where name is our custom animation's name then e.cur(true) will likely return zero and create a divide by zero bug which will set start to NaN. The following monkey patch for animate() gets around this by storing the units used in the rotation definition and then stripping the units off. */
var animateProxied = $.fn.animate;
$.fn.animate = function (prop){
if (typeof prop['rotate'] != 'undefined'){
var m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
if (m && m[5]){
rotateUnits = m[5];
}
prop['rotate'] = m[1];
}
return animateProxied.apply(this,arguments);
}
}
)(jQuery);
CSS代码(style.css):
.menu{width:800px;height:52px;position:relative;top:200px;left:100px;font-family:"Trebuchet MS",sans-serif;font-size:16px;font-style:normal;font-weight:bold;text-transform:uppercase;}
.item{position:relative;background-color:#f0f0f0;float:right;width:52px;margin:0px 5px;height:52px;border:2px solid #ddd;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;box-shadow:1px 1px 3px #555;cursor:pointer;overflow:hidden;}
.link{left:2px;top:2px;position:absolute;width:48px;height:48px;}
.icon_home{background:transparent url(../images/home.png) no-repeat top left;}
.icon_mail{background:transparent url(../images/mail.png) no-repeat top left;}
.icon_help{background:transparent url(../images/help.png) no-repeat top left;}
.icon_find{background:transparent url(../images/find.png) no-repeat top left;}
.icon_photos{background:transparent url(../images/photos.png) no-repeat top left;}
.item_content{position:absolute;height:52px;width:220px;overflow:hidden;left:56px;top:7px;background:transparent;display:none;}
.item_content h2{color:#aaa;text-shadow:1px 1px 1px #fff;background-color:transparent;font-size:14px;}
.item_content a{background-color:transparent;float:left;margin-right:7px;margin-top:3px;color:#bbb;text-shadow:1px 1px 1px #fff;text-decoration:none;font-size:12px;}
.item_content a:hover{color:#0b965b;}
.item_content p{background-color:transparent;display:none;}
.item_content p input{border:1px solid #ccc;padding:1px;width:155px;float:left;margin-right:5px;}
分享到QQ
分享到微博
微信扫一扫
