经验分享程序开发文档资料数据资源其它资源

jQuery Path风格旋转菜单特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery Path风格旋转菜单特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery Path风格旋转菜单特效代码

HTML代码(index.html):

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<title>jQuery Path风格旋转菜单</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="js/jquery.wheelmenu.js"></script>
  <style>
    html {
      height: 100%;
    }
    body {
      background: #f4eedf;
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 100%;
    }
    
    .wrapper {
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto; 
    	overflow: hidden;
    }
    
    a {
      text-decoration: none;
    }
    
    
    h1, h2 {
      width: 100%;
      float: left;
    }
    h1 {
      margin-top: 100px;
      color: #555;
      margin-bottom: 5px;
    }
    h2 {
      color: #999;
      font-weight: 100;
      margin-top: 0;
      margin-bottom: 10px;
    }
    
    .pointer {
      color: #34495e;
      font-family: 'Pacifico', cursive;
      font-size: 22px;
      margin-top: -15px;
    }

    .wheel-button, .wheel-button:visited {
      line-height: 35px;
      font-weight: bold;
      font-size: 36px;
      background: #df4727; 
      padding: 10px 11px;
      text-align: center;
      border-radius: 50px;
      width: 35px;
      height: 35px;
      color: white;
      display: block;
      margin: 70px auto 20px;
      border: 3px solid #92311e;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }

    .wheel-button:hover{ 
      color: white;
    }
    
    .wheel-button.ne {
      border-color: white;
      background: #1ABC9C;
      color: #34FFFF;
      position: absolute;
      bottom: 10px;
      left: 10px;
    }
    
    .wheel-button.nw {
      border-color: white;
      background-color: #E67E22;
      color: #FFFC44;
      position: absolute;
      bottom: 10px;
      right: 10px;
    }

    .wheel-button span, .wheel span{
      position: relative;
      -moz-transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      display: block;
    }

    .wheel-button.active span{
      transform: rotate(135deg);
      -ms-transform: rotate(135deg); /* IE 9 */
      -webkit-transform: rotate(135deg); /* Safari and Chrome */
    }

    .wheel li a, .wheel li a:visited{
      background: rgba(0,0,0,0.65);
      border-radius: 50px;
      font-weight: bold;
      padding: 10px;
      text-align: center;
      width: 20px;
      height: 20px;
      border: 1px solid black;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
      color: white;
      -moz-transition: all 0.25s ease;
      -webkit-transition: all 0.25s ease;
      -o-transition: all 0.25s ease;
      transition: all 0.25s ease;
    }

    .wheel li a:hover{
      background: rgba(0,0,0,0.8);
    }

    .main {
      float: left;
      width: 100%;
      margin: 0 auto;
    }
    
    .reload, .btn{
      display: inline-block;
      border: 4px solid #FFF;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background: rgba(255,255,255, 0.75);
      display: inline-block;
      line-height: 100%;
      padding: 0.7em;
      text-decoration: none;
      opacity: 0.7;
      color: #555;
      width: 100px;
      line-height: 140%;
      font-size: 17px;
      font-family: open sans;
      font-weight: bold;
    }
    .reload:hover, .btn:hover {
      background: white;
    }
    .btn {
      width: 200px;
    }
    .btns {
      width: 230px;
      margin: 50px auto;
    }
    .credit {
      text-align: center;
      color: #999;
      padding: 10px;
      margin: 0 0 40px 0;
      background: rgba(255,255,255,0.25);
      float: left;
      width: 100%;
    }
    .credit a {
      color: #555;
      text-decoration: none;
      font-weight: bold;
    }
	</style>
	<link rel="stylesheet" type="text/css" href="css/wheelmenu.css" />
	<script>
	  $(document).ready(function(){
			$(".wheel-button").wheelmenu({
        trigger: "hover",
        animation: "fly",
        animationSpeed: "fast"
      });
		});
		
	</script>
</head>
<body>
  <div class="wrapper">
    <h1>鼠标移到加号按钮即可弹出菜单</h1>
	  <div class="main">
	    <a href="#wheel" class="wheel-button">
	     <span>+</span>
	    </a>
	    <div class="pointer">Hover me</div>
      <ul id="wheel"  data-angle="all">
        <li class="item"><a href="#home">A</a></li>
        <li class="item"><a href="#home">B</a></li>
        <li class="item"><a href="#home">C</a></li>
        <li class="item"><a href="#home">D</a></li>
        <li class="item"><a href="#home">E</a></li>
        <li class="item"><a href="#home">F</a></li>
        <li class="item"><a href="#home">G</a></li>
        <li class="item"><a href="#home">H</a></li>
        <li class="item"><a href="#home">I</a></li>
        <li class="item"><a href="#home">J</a></li>
      </ul>
      
      <a href="#wheel2" class="wheel-button ne">
		   <span>+</span>
		  </a>
      <ul id="wheel2" data-angle="NE" class="wheel">
        <li class="item"><a href="#home">A</a></li>
        <li class="item"><a href="#home">B</a></li>
        <li class="item"><a href="#home">C</a></li>
        <li class="item"><a href="#home">D</a></li>
      </ul>
      
      <a href="#wheel3" class="wheel-button nw">
		   <span>+</span>
		  </a>
      <ul id="wheel3" data-angle="NW" class="wheel">
        <li class="item"><a href="#home">A</a></li>
        <li class="item"><a href="#home">B</a></li>
        <li class="item"><a href="#home">C</a></li>
        <li class="item"><a href="#home">D</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

JS代码(jquery.wheelmenu.min.js):

!function($){
	function predefineAngle(settings){
	var convert=false;
	if($.type(settings.angle)=="string"){
	try{
	if(eval(settings.angle).length>1)convert=true}
catch(err){
	convert=false}
if(convert==true){
	settings.angle=JSON.parse(settings.angle)}
else{
	switch(settings.angle){
	case"N":settings.angle=[180,380];
	break;
	case"NE":settings.angle=[270,380];
	break;
	case"E":settings.angle=[270,470];
	break;
	case"SE":settings.angle=[360,470];
	break;
	case"S":settings.angle=[360,560];
	break;
	case"SW":settings.angle=[90,200];
	break;
	case"W":settings.angle=[90,290];
	break;
	case"NW":settings.angle=[180,290];
	break;
	case"all":settings.angle=[0,360];
	break}
}
}
return settings}
function predefineSpeed(e){
	if($.type(e.animationSpeed)=="string"){
	switch(e.animationSpeed){
	case"slow":e.animationSpeed=[75,700];
	break;
	case"medium":e.animationSpeed=[50,500];
	break;
	case"fast":e.animationSpeed=[25,250];
	break;
	case"instant":e.animationSpeed=[0,0];
	break}
}
return e}
var defaults={
	trigger:"click",animation:"fade",angle:[0,360],animationSpeed:"medium"}
;
	$.fn.centerAround=function(e){
	var t=e.offset(),n=e.outerWidth(),r=e.outerHeight(),i=t.left-$(document).scrollLeft()+n/2,s=t.top-$(document).scrollTop()+r/2,o=this.offset();
	this.css("position","fixed");
	this.css("top",s-this.outerHeight()/2+"px");
	this.css("left",i-this.outerWidth()/2+"px");
	return this}
;
	$.fn.flyIn=function(e,t,n,r,i,s,o,u){
	var a=0;
	this.stop(true,true);
	this.each(function(e){
	i=(u.angle[0]+s*e)*(Math.PI/180);
	var t=Math.round(n/2+o*Math.cos(i)-$(this).find("a").outerWidth()/2),f=Math.round(r/2+o*Math.sin(i)-$(this).find("a").outerHeight()/2);
	$(this).animateRotate(360).css({
	position:"absolute",opacity:0,left:"50%",top:"50%",marginLeft:"-"+$(this).outerWidth()/2,marginTop:"-"+$(this).outerHeight()/2}
).delay(a).animate({
	opacity:1,left:t+"px",top:f+"px"}
,u.animationSpeed[1]);
	a+=u.animationSpeed[0]}
)}
;
	$.fn.flyOut=function(e,t){
	var n=0;
	this.stop(true,true);
	$(this.get().reverse()).each(function(){
	$(this).animateRotate(-360).delay(n).animate({
	opacity:0,left:e.outerWidth()/2+"px",top:e.outerHeight()/2+"px"}
,150);
	n+=15}
).promise().done(function(){
	e.removeClass("active").css("visibility","hidden").hide();
	t.removeClass("active")}
)}
;
	$.fn.fadeInIcon=function(e,t,n,r,i,s,o,u){
	var a=0;
	this.stop(true,true);
	this.each(function(e){
	i=(u.angle[0]+s*e)*(Math.PI/180);
	var t=Math.round(n/2+o*Math.cos(i)-$(this).find("a").outerWidth()/2),f=Math.round(r/2+o*Math.sin(i)-$(this).find("a").outerHeight()/2);
	$(this).css({
	position:"absolute",left:t+"px",top:f+"px",opacity:0}
).delay(a).animate({
	opacity:1}
,u.animationSpeed[1]);
	a+=u.animationSpeed[0]}
)}
;
	$.fn.fadeOutIcon=function(e,t){
	var n=0;
	this.stop(true,true);
	$(this.get().reverse()).each(function(){
	$(this).delay(n).animate({
	opacity:0}
,150);
	n+=15}
).promise().done(function(){
	e.removeClass("active").css("visibility","hidden").hide();
	t.removeClass("active")}
)}
;
	$.fn.hideIcon=function(e,t){
	var n=this.find(".item"),r=this;
	switch(t.animation){
	case"fade":n.fadeOutIcon(r,e);
	break;
	case"fly":n.flyOut(r,e);
	break}
}
;
	$.fn.showIcon=function(e,t){
	var n=this,r="6";
	if(t.trigger=="hover"){
	var r="3"}
e.addClass("active").css({
	"z-index":r}
);
	n.show().css({
	position:"absolute","z-index":"5",padding:"30px"}
).centerAround(e);
	n.addClass("wheel active").css("visibility","visible").show();
	if(n.attr("data-angle")){
	t.angle=n.attr("data-angle")}
t=predefineAngle(t);
	var i=n.width()/2,s=n.find(".item"),o=n,u=o.innerWidth(),a=o.innerHeight(),f=0,l=(t.angle[1]-t.angle[0])/s.length;
	switch(t.animation){
	case"fade":s.fadeInIcon(n,e,u,a,f,l,i,t);
	break;
	case"fly":s.flyIn(n,e,u,a,f,l,i,t);
	break}
}
;
	$.fn.animateRotate=function(e,t,n,r){
	return this.each(function(){
	var i=$(this);
	$({
	deg:0}
).animate({
	deg:e}
,{
	duration:t,easing:n,step:function(e){
	i.css({
	transform:"rotate("+e+"deg)"}
)}
,complete:r||$.noop}
)}
)}
;
	$.fn.wheelmenu=function(e){
	var t=$.extend({
}
,defaults,e);
	t=predefineSpeed(t);
	return this.each(function(){
	var e=$(this);
	var n=$($(this).attr("href"));
	n.addClass("wheel");
	e.css("opacity",0).animate({
	opacity:1}
);
	if(t.trigger=="hover"){
	e.bind({
	mouseenter:function(){
	n.showIcon(e,t)}
}
);
	n.bind({
	mouseleave:function(){
	n.hideIcon(e,t)}
}
)}
else{
	e.click(function(){
	if(n.css("visibility")=="visible"){
	n.hideIcon(e,t)}
else{
	n.showIcon(e,t)}
}
)}
}
)}
}
(window.jQuery)

CSS代码(wheelmenu.css):

/* Required Stylesheets */
.wheel-button{position:relative;}
.wheel{margin:0;padding:0;list-style:none;width:200px;/* this will determine the diameter of the circle */
 height:200px;/* this will determine the diameter of the circle */
 visibility:hidden;position:relative;display:none;}
.wheel li{overflow:hidden;float:left;}
.wheel li a{display:block;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
77.57 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
77.57 KB
立即下载
刘纯岚媛
了解
打赏作者 鼓励作者
Html Js 菜单导航特效1
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章