jquery+CSS3实现淘宝移动网页菜单效果


Posted in Javascript onAugust 31, 2015

本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果。分享给大家供大家参考。具体如下:

这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移。难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错。相信肯定有更好的解决方法。

先来看看运行效果截图:

jquery+CSS3实现淘宝移动网页菜单效果

在线演示地址如下:

具体代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现淘宝移动网页菜单</title>
<script src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body { background: #f5f5f5; }
ul, li,img { margin: 0; padding: 0; list-style: none; border:0;}
a { outline:none;}
.phone { width:350px; height:600px; border:#000 solid 1px; position:absolute;}
.plate { width: 281px; height: 281px; border-radius:50%; padding:6px; background:rgba(0,0,0,0.2); overflow: hidden; position: absolute; bottom:0; left:0;}
.link { width: 100%; height: 100%; position: absolute; }
.sector { width: 281px; height: 281px; overflow: hidden; background: url(images/bg.png); position: absolute; }
.sector li { position: absolute; width: 50%; height: 50%; overflow: hidden; }
.sector a { position: absolute; width: 100%; height: 100%; border-top-left-radius: 100%; line-height: 999px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); margin: -25px 0 0 45px; background: #ff4400; display:none; }
.sector li.r2 { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); margin: -26px 0 0 96px; }
.sector li.r3 { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); margin: 44px 0 0 166px; }
.sector li.r4 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); margin: 140px 0 0 140px; }
.sector li.r5 { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); margin: 166px 0 0 44px; }
.sector li.r6 { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); margin: 96px 0 0 -26px; }
.icon { position: absolute; }
.icon li { position: absolute; width: 44px; height: 37px; background: #ccc; overflow: hidden; line-height: 999px; background: url(images/icon.png); display: none; }
.icon li.r1 { margin: 37px 0 0 71px; background-position: 0 -37px; }
.icon li.r2 { margin: 37px 0 0 168px; background-position: -220px -37px;}
.icon li.r3 { margin: 122px 0 0 214px; background-position: -176px -37px;}
.icon li.r4 { margin: 204px 0 0 165px; background-position: -132px -37px; }
.icon li.r5 { margin: 208px 0 0 76px; background-position: -88px -37px; }
.icon li.r6 { margin: 120px 0 0 21px; background-position: -44px -37px;}
.home { width:138px; height:138px; overflow:hidden; line-height:999px; position:absolute; border-radius:50%; left:50%; top:50%; margin:-69px 0 0 -69px;}
.home.over a { display:block; background:#ff4400; width:125px; height:125px; border-radius:50%; margin:7px;}
.home.over a span { display:block; width:53px; height:46px; position:relative; margin:auto; top:40px;}
.menu { position:absolute; bottom:25px; left:25px;}
.menu a { display:block; width:60px; height:60px; border-radius:50%; background:#ff4400; border:#fff solid 5px; box-shadow: 0 0 0 3px rgba(200,200,200,0.3);}
.menu a span { background:url(images/icon.png) no-repeat -264px -46px; display:block; width:41px; height:31px; overflow:hidden; line-height:999px; margin:14px 0 0 9px;}
/*菜单动画*/
.plate {
 -webkit-transition:all 0.3s;
 transition:all 0.3s;
 -webkit-transform:translate(-100px,100px) scale(0,0) rotate(0);
 transform:translate(-100px,100px) scale(0,0) rotate(0);
}
.plate.open {
 -webkit-transform:translate(28px,-100px) scale(1,1) rotate(360deg);
 transform:translate(28px,-100px) scale(1,1) rotate(360deg);
}
.menu a {
 -webkit-transition:all 0.3s;
 transition:all 0.3s;
}
.menu a.open { background:rgba(200,200,200,0.5);}
</style>
</head>
<body>
<p>若动画不流畅请刷新一下页面</p>
<div class="phone">
 <div class="plate">
 <ul class="sector">
 <li class="r1"><a href="#">我的淘宝</a></li>
 <li class="r2"><a href="#">购物车</a></li>
 <li class="r3"><a href="#">搜索</a></li>
 <li class="r4"><a href="#">更多</a></li>
 <li class="r5"><a href="#">物流</a></li>
 <li class="r6"><a href="#">旺旺</a></li>
 </ul>
 <ul class="icon">
 <li class="r1">我的淘宝</li>
 <li class="r2">购物车</li>
 <li class="r3">搜索</li>
 <li class="r4">更多</li>
 <li class="r5">物流</li>
 <li class="r6">旺旺</li>
 </ul>
 <div class="home"><a href="#"><span>主页</span></a></div>
 <div class="link"><img src="images/link.png" width="100%" height="100%" usemap="#Map">
 <map name="Map" id="map">
  <area shape="poly" coords="140,67,139,1,72,21,25,68,85,107" href="#a">
  <area shape="poly" coords="196,105,256,74,213,23,141,5,142,73" href="#b">
  <area shape="poly" coords="196,106,257,75,277,132,260,208,198,174" href="#c">
  <area shape="poly" coords="195,173,258,211,214,259,144,279,141,205" href="#d">
  <area shape="poly" coords="141,203,136,279,68,256,21,208,86,174" href="#e">
  <area shape="poly" coords="84,169,18,206,2,131,22,72,83,108" href="#f">
  <area shape="circle" coords="141,140,63" href="#home">
 </map>
 </div>
 </div>
 <div class="menu">
 <a href="#taobao"><span>淘宝</span></a>
 </div>
</div>
<script>
$("#map area[shape='poly']").hover(function(){
 i = $(this).index();
 $(".sector a").eq(i).show();
 $(".icon li").eq(i).show();
},function(){
 $(".sector a").eq(i).hide();
 $(".icon li").eq(i).hide();
});
$("#map area[shape='circle']").hover(function(){
 $(".home").addClass("over");
},function(){
 $(".home").removeClass("over");
});
$(".menu a").click(function(){
 if($(this).attr("class") == "open"){
  $(this).removeClass("open");
  $(this).addClass("close");
  $(".plate").removeClass("open");
  $(".plate").addClass("close");
 }else{
  $(this).removeClass("close");
  $(this).addClass("open");
  $(".plate").removeClass("close");
  $(".plate").addClass("open");
 }
});
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
Vue实现购物车功能
Apr 27 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 #Javascript
jquery选择器简述
Aug 31 #Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 #Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 #Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 #Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 #Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 #Javascript
You might like
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
javascript每日必学之封装
2016/02/23 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
Python之web模板应用
2017/12/26 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Python中return函数返回值实例用法
2020/11/19 Python
python自动生成sql语句的脚本
2021/02/24 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
《钱学森》听课反思
2014/03/01 职场文书
对祖国的寄语大全
2014/04/11 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2015年复活节活动总结
2015/02/27 职场文书
成绩单家长意见
2015/06/03 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
用Python爬取某乎手机APP数据
2021/06/15 Python