jquery+CSS3实现淘宝移动网页菜单效果
本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果。分享给大家供大家参考。具体如下：
这是一款基于jquery+CSS3实现的淘宝移动网页菜单，其实这个菜单动画并不复杂，只有缩放和位移。难点是用了扇形结构，而且还要实现扇形的链接区域，这个就费脑筋了，最后采用了传统的图片map来做热区，效果还不错。相信肯定有更好的解决方法。
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-css3-taobao-phone-menu-codes/
具体代码如下：
<!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+css3 实现动态按钮菜单特效
一个菜单按钮特效案例,简单的实现了动态效果. 废话不多说了,直接给大家贴代码了,代码写好不好,还请给位大侠多多指教. <div class="bar" id="menubar"> <div class="menu" id="menu0"> </div> <div class="menu" id="menu1"> </div> &
-
jquery+CSS3模拟Path2.0动画菜单效果代码
本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋
-
jquery和css3实现的炫酷时尚的菜单导航
今天为大家带来的是jquery和css3实现的不错的导航菜单.点击列表图表后,内容页面向内移动显示菜单项.当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位.看下图 源码下载 我们看下实现代码: html代码: <div style="position: relative; height: 400px; width: 825px; margin: auto;"> <div class="contener"> <div id="c
-
javascript结合CSS实现苹果开关按钮特效
苹果开关按钮效果~~ 关闭时 开启时 html 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>apple button</title> </head> <body>
-
7款风格新颖的jQuery/CSS3菜单导航分享
一款优秀的菜单对网站而言是非常重要的,它不仅可以让用户方便地找到想要的信息,而且更让人有一种特殊的用户体验.下面给大家分享7款风格新颖的jQuery/CSS3菜单导航,希望大家会喜欢. 1.CSS3立体飘带状菜单 CSS3立体飘带状菜单,该菜单鼠标滑过时,菜单项向上立体凸起,结合黑色的木质背景,整个菜单显得非常立体生动. 在线演示 /源码下载 2.CSS3个人资料导航菜单 该菜单是用来展示登录的用户信息,包括用户的快捷操作按钮,另外菜单还提供一个个性化的搜索框. 在线演示 /源码下载 3.jQu
-
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示 源码下载 该下拉菜单的HTML结构非常简单,基本的HTML结构如下: <div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trig
-
jquery+CSS3实现淘宝移动网页菜单效果
本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移.难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错.相信肯定有更好的解决方法. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css3-taobao-phone-menu-c
-
jQuery实现类似淘宝网图片放大效果的方法
本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="
-
基于jQuery模拟实现淘宝购物车模块
这是网页版淘宝中购物车的页面 注意给checkbox添加事件就是用change() 给button添加事件就是用click() 1.每次点击+号,根据文本框的值乘以当前商品的价格就是商品的小计 2.只能增加本商品的小计,就是当前商品的小计模块 3.修改普通元素的内容是text方法 4.当前商品的价格要把￥符号去掉再相乘 截取字符串substr() 5.parents(‘选择器’)可以返回指定祖先元素4 6.最后计算的结果如果想要保留两位小数通过toFixed(2)方法 7.用户也可以直接修改表单
-
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
本文实例讲述了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery仿淘宝带有指示条的图片转动切换结果</title> <style type="text/css"> * { padd
-
jquery+CSS实现的水平布局多级网页菜单效果
本文实例讲述了jquery+CSS实现的水平布局多级网页菜单效果.分享给大家供大家参考.具体如下: 这里演示的Jquery和CSS共同实现的网页常见的导航菜单,支持两级形式,蓝色风格,最多支持二级,三级可能要对代码进行改造了.本菜单属于中规中矩型,实用性比较强,适合的网站种类也是很多的,希望大家会喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-scroll-nav-menu-style-codes/ 具体代码如下:
-
jquery实现清新实用的网页菜单效果
本文实例讲述了jquery实现清新实用的网页菜单效果.分享给大家供大家参考.具体如下: 这是一款应用了jQuery插件来实现的网页菜单,看上去十分清新实用,来自美国Flickr网站,不知道Flickr网站的朋友自己去查.这款菜单在用户点击了主菜单项的时候,会滑出二级的子菜单,菜单前边带有小图标,增加了人性化体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-plug-web-menu-codes/ 具体代码如下: <!DOCTY
-
jquery实现类似淘宝星星评分功能实例
本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用.具体方法如下: html部分代码如下: <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div>
-
jQuery UI仿淘宝搜索下拉列表功能
jquery仿淘宝搜索下拉列表实现效果如下: 网上搜索教程: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href=
-
JavaScript+CSS实现仿天猫侧边网页菜单效果
本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st
-
jquery实现平滑的二级下拉菜单效果
本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>