给你的移动网站加点料:移动旋转菜单的实现方案 – 灸野

  在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在页面的左下角或者右下角,将回首页、消息通知、登录、个人中心等此类公共功能放入其中,这样不管你在哪个网页上,想回到这些公共功能的时候,只要点一下左下角或者右下角的这么个小东西,就可以立刻过去。

  看到代码前,先来几张页面截图吧。(我是真的需要申请个域名整个服务器把这些示例代码部署上去,让大家直接访问看到实际效果了,所以在这之前,各位先动动手,使用代码自己玩一下吧,哈哈~)

  这个控件的实现上主要使用了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>

 

本文链接:http://www.cnblogs.com/iamjiuye/p/3293599.html,转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量