給你的移動網站加點料：移動旋轉菜單的實現方案

       在github上看到有人用HTML5 + CSS3 + Javascript實現了jQuery Wheel Menu（旋轉菜單），由於本人供職於移動網站的開發，又不是一個專業的前端開發，因此看到這麼炫的東東確定就垂涎三尺，想移植到移動平臺，固然最好一句 代碼不修改直接移植過來是最省事的，可是最終發現此大牛給出的Demo在移動端上展示是有必定問題的，因此在邊看中國好聲音的過程當中，修改了他的一部分代 碼，實現了在移動瀏覽器上能夠自由使用的jQuery Wheel Menu（旋轉菜單）。

　　既然實現瞭如此絢麗的菜單，那麼在移動網站上究竟在怎麼樣的場景下可使用呢？其實，淘寶移動主站（m.taobao.com）左下角的「淘」 就是這樣一個相似的效果，可是淘寶主站實現的一些絢麗效果有一個讓人頭疼的問題，就是在移動端沒問題，可是在PC端上就是沒有任何效果。也許專業的前端能 夠接受這件事情，畢竟人家作的移動網站和PC無關的。不過由於本人是一個半路出家的很不專業的假「前端」開發工程師，因此我但願在移動端上實現的一些絢麗 效果當用PC瀏覽器訪問的時候，用鼠標點擊代替移動端手指Tap的時候，也一樣看到相似的效果。因此，此次玩的jQuery Wheel Menu在移動端和PC端的瀏覽器上無論你是Click仍是Tap都是能夠玩的。

　　那這種旋轉式的菜單到底什麼場景下使用呢？還不知道嗎？我都舉例淘寶了，固然你去看一看嘛，哈哈~這種旋轉式菜單適合fixed在頁面的左下角 或者右下角，將回首頁、消息通知、登陸、我的中心等此類公共功能放入其中，這樣無論你在哪一個網頁上，想回到這些公共功能的時候，只要點一下左下角或者右下 角的這麼個小東西，就能夠馬上過去。   

　　在線演示地址：http://sandbox.runjs.cn/show/lmfucabu

　　你也能夠拿出手機掃描下方二維碼，直接在手機上進行效果演示：

     

　　看到代碼前，先來幾張頁面截圖吧。

　　這個控件的實現上主要使用了CSS3的動畫實現方式，各位有興趣的同窗，能夠藉助這個例子來很好地瞭解一下CSS3的動畫實現方式。好了，廢話很少說了，直接上代碼吧！

Javascript代碼：jquery.wheelmenu.js

對Javascript代碼沒有進行改動，我之因此說本身是個「假」前端就是由於我很不「喜歡」去寫Javascript，因此我使用了github上的源碼。

!function($){
  
  var defaults = {
		trigger: "click",
		animation: "fade",
		angle: [0,360],
		animationSpeed: "medium"
	};

	$.fn.centerAround = function (button) {
    var offset = button.offset(),
        width = button.outerWidth(),
        height = button.outerHeight(),
        buttonX = (offset.left - $(document).scrollLeft() ) + width / 2,
        buttonY = (offset.top -  $(document).scrollTop() ) + height / 2,
        objectOffset = this.offset();
        // alert(width);
        // alert(height);
        // alert(buttonX);
        // alert(buttonY);
    this.css("position","fixed");
    this.css("top", buttonY  - (this.outerHeight() / 2)  + "px");
    this.css("left", buttonX - (this.outerWidth() / 2)   + "px");
    return this;
  }
  
  $.fn.flyIn = function (el, button, width, height, angle, step, radius, settings) {
    var d = 0;
    this.stop(true,true);
    this.each(function(index) {
      angle = (settings.angle[0] + (step * index)) * (Math.PI/180); 
      var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).find("a").outerWidth()/2),
          y = Math.round(height/2 + radius * Math.sin(angle) - $(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(d).animate({
        opacity:1,
        left: x + 'px',
        top: y + 'px'
      }, settings.animationSpeed[1]);
      d += settings.animationSpeed[0];
    });
  }
  
  $.fn.flyOut = function (el, button) {
    var d = 0;
    this.stop(true,true);
    $(this.get().reverse()).each(function() {
	    $(this).animateRotate(-360).delay(d).animate({
	      opacity:0,
	      left: el.outerWidth() / 2 + "px",
        top: el.outerHeight() / 2 + "px"
	    }, 150);
      d += 15;
	  }).promise().done( function() {
      el.removeClass("active").css("visibility", "hidden").hide();
      button.removeClass("active")
    });
  }
  
  $.fn.fadeInIcon = function (el, button, width, height, angle, step, radius, settings) {
    var d = 0;
    this.stop(true,true);
    this.each(function(index) {
      angle = (settings.angle[0] + (step * index)) * (Math.PI/180); 
      var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).find("a").outerWidth()/2),
          y = Math.round(height/2 + radius * Math.sin(angle) - $(this).find("a").outerHeight()/2);
      $(this).css({
          position: 'absolute',
          left: x + 'px',
          top: y + 'px',
          opacity: 0
      }).delay(d).animate({opacity:1}, settings.animationSpeed[1]);
      
      d += settings.animationSpeed[0];
    });
  }
  
  $.fn.fadeOutIcon = function (el, button) {
    var d = 0;
    this.stop(true,true);
    
    $(this.get().reverse()).each(function() {
	    $(this).delay(d).animate({opacity:0}, 150);
      d += 15;
	  }).promise().done( function() {
      el.removeClass("active").css("visibility", "hidden").hide();
      button.removeClass("active")
    });
  }

	$.fn.hideIcon = function (button, settings) {
	  var fields = this.find(".item"),
	      el = this;
	  switch (settings.animation) { 
      case 'fade': 
        fields.fadeOutIcon(el, button)
        break; 
    
      case 'fly': 
        fields.flyOut(el, button)
        break; 
    }

	}

	$.fn.showIcon = function (button, settings) {
	  var el = this,
	      zindex = '6';
	  if (settings.trigger == "hover") {
	    var zindex = '3';
    }
	  button.addClass("active").css({
      'z-index': zindex
    });
    
    
    
	  el.show().css({
        position: 'absolute',
        'z-index': '5',
        'padding': '30px' // add safe zone for mouseover
    }).centerAround(button); 
    el.addClass("wheel active").css("visibility", "visible").show();

	  if (el.attr('data-angle')) {
      settings.angle = el.attr('data-angle')
    }
    
    settings = predefineAngle(settings);
	  var radius = el.width() / 2,
      fields = el.find(".item"),
      container = el,
      width = container.innerWidth(),
      height = container.innerHeight(),
      angle =  0,
      step = (settings.angle[1] - settings.angle[0]) / fields.length;
     
     
      switch (settings.animation) { 
        case 'fade': 
          fields.fadeInIcon(el, button, width, height, angle, step, radius, settings)
          break; 
          
        case 'fly': 
          fields.flyIn(el, button, width, height, angle, step, radius, settings)
          break; 
      }
    
	}

	$.fn.animateRotate = function(angle, duration, easing, complete) {
      return this.each(function() {
          var $elem = $(this);

          $({deg: 0}).animate({deg: angle}, {
              duration: duration,
              easing: easing,
              step: function(now) {
                  $elem.css({
                      transform: 'rotate(' + now + 'deg)'
                  });
              },
              complete: complete || $.noop
          });
      });
  };
  

	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(settings) {
	  if ($.type(settings.animationSpeed) == "string") { 
      switch (settings.animationSpeed) { 
        case 'slow':
          settings.animationSpeed = [75,700]
          break;
        case 'medium':
          settings.animationSpeed = [50,500]
          break;
        case 'fast':
          settings.animationSpeed = [25,250]
          break;
        case 'instant':
          settings.animationSpeed = [0,0]
          break;
      }
    }
    return settings;
	}
  
  $.fn.wheelmenu = function(options){
    var settings = $.extend({}, defaults, options);
    
    settings = predefineSpeed(settings);
    
    return this.each(function(){
      var button = $(this)
      var el = $($(this).attr("href"));
      el.addClass("wheel");
      
      button.css("opacity", 0).animate({
        opacity: 1
      })
      if (settings.trigger == "hover") {

        button.bind({
          mouseenter: function() {
            el.showIcon(button, settings);
          }
        });
        
        el.bind({
          mouseleave: function() {
            el.hideIcon(button, settings);
          }
        });
        
      } else {
        button.click( function() {
          if (el.css('visibility') == "visible") {
            el.hideIcon(button, settings);
          } else {
            el.showIcon(button, settings);
          }
        });
      }
    });
  }
  
}(window.jQuery);

CSS代碼：wheelmenu.css

我對CSS的代碼是比較有興趣玩的，因此並無徹底使用做者的CSS代碼以及代碼結構，由於我以爲做者的CSS代碼在規範性上仍是存在必定問題的 （提供了CSS文件，可是在Demo的html中又寫了很大一段代碼，這種規範向來都是我鄙視的，鄙視一下大拿做者，來提高一下本身吧，哈哈~）

body {
  background: #C1FFC1;
  padding: 0;
  text-align: center;
  position: relative;
  margin: 0;
}

a {
  text-decoration: none;
}

.main {
  width: 100%;
  margin: 0 auto;
}

h1 {
  font-family: 'Pacifico', cursive;
  margin: 10px;
  width: 100%;
  color: #CD2626;
}

.wheel-button {
  position: relative;
  line-height: 35px;
  font-weight: bold;
  font-size: 35px;
  background: #FF7300;
  padding: 10px;
  text-align: center;
  border-radius: 50px;
  width: 35px;
  height: 35px;
  color: white;
  display: block;
  margin: 20px auto 20px;
  border: 1px solid #cccccc;
  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 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 */
}

.pointer {
  color: #836FFF;
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  height: 30px;
  line-height: 30px;
  margin: 10px 0 0px 0;
}

.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;
  background: rgba(0,0,0,0.5);
  border-radius: 50px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  width: 20px;
  height: 20px;
  border: 1px solid #ffffff;
  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);
  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-button.ne {
  border-color: white;
  background: #1ABC9C;
  color: #34FFFF;
  position: fixed;
  bottom: 10px;
  left: 10px;
}
    
.wheel-button.nw {
  border-color: white;
  background-color: #E67E22;
  color: #FFFC44;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

Demo Html代碼：wheelmenu.html

一個簡單的移動頁面的示例代碼結構，我對視覺設計欠缺，因此Demo頁面各位注重事先的效果就能夠了。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<title>jQuery Wheel Menu On Mobile</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  	<script type="text/javascript" src="jquery.wheelmenu.js"></script>
	<link rel="stylesheet" type="text/css" href="wheelmenu.css" />
	<script>
		addEventListener("load", function() { setTimeout(scrollTo, 0, 0, 0); }, false);
	  	$(document).ready(function(){
			$(".wheel-button").wheelmenu({
        trigger: "click",
        animation: "fly",
        animationSpeed: "fast"
      });
		});

	</script>
</head>
<body>
	<div class="main">
		<h1>jQuery Wheel Menu On Mobile</h1>
	    <div class="pointer">Touch me, please!</div>
	    <a href="#wheel" class="wheel-button">
	    	<span>+</span>
	    </a>
		<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>
</body>
</html>