效果图
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#J_Shade {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: .2;
-webkit-transform: translate3d(0, 0, 0);
z-index: 97;
}
.none {
display: none;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.taoplus {
position: fixed;
border-left: 1px solid transparent;
bottom: 10px;
left: 0;
padding-left: 10px;
z-index: 99;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-transform: translate3d(0,0,0)
}
.taoplus .tpbtn,.taoplus .icontao,.taoplus .iconlogis,.taoplus .iconww,.taoplus .iconcar,.taoplus .tpicons,.taoplus .cart span {
background: url(../test/images/sprite1.png) no-repeat;
-webkit-background-size: 195px 274px
}
.taoplus .more .bg,.taoplus .logis .bg,.taoplus .ww .bg,.taoplus .individ .bg,.taoplus .car .bg,.taoplus .search .bg,.taoplus .tplogo .bg {
background: url(../test/images/sprite2.png) no-repeat;
-webkit-background-size: 216px 212.5px
}
.taoplus .tpbtn {
position: relative;
width: 54px;
height: 54px
}
.taoplus .tpbtn.on {
background-position: 1px -197px
}
.taoplus .tpbtn.off {
background-position: -55.2px -197px
}
.taoplus .tpbtn.off .num {
display: none
}
.taoplus .tpbtn .num {
position: absolute;
right: 0;
top: 3px;
width: 18px;
height: 18px;
line-height: 18px;
font-size: .86rem;
text-align: center;
color: #f40;
font-weight: 700;
background-color: rgba(255,255,255,.8);
border-radius: 200px;
-webkit-border-radius: 200px
}
.taoplus .tpbtn div {
position: absolute;
left: 8px;
top: 8px;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 200px;
-webkit-border-radius: 200px
}
.taoplus .tpbtn ul {
position: absolute;
left: 0;
top: 0;
height: 100%;
overflow: hidden
}
.taoplus .tpbtn ul li {
width: 40px;
height: 40px;
float: left;
overflow: hidden
}
.taoplus .tpbtn .icontao {
background-position: -107px -200px
}
.taoplus .tpbtn .iconlogis {
background-position: -148px -198px
}
.taoplus .tpbtn .iconww {
background-position: -106px -238px
}
.taoplus .tpbtn .iconcar {
background-position: -146px -236px
}
.taoplus .tpbtn .iconact {
-webkit-animation: iconaction .2s linear 5
}
@-webkit-keyframes iconaction {
0% {
margin-top: 0
}
50% {
margin-top: 5px
}
100% {
margin-top: 0
}
}
.taoplus .circle {
position: absolute;
left: 30px;
bottom: 30px;
width: 195px;
height: 195px;
overflow: hidden;
-webkit-transition: all linear .15s
}
.taoplus .circle.show {
opacity: 1;
-webkit-transform: translate(0px,0) scale(1);
pointer-events: auto
}
.taoplus .circle.hide {
opacity: 0;
-webkit-transform: translate(-100px,100px) scale(0.2);
pointer-events: none
}
.taoplus .tpicons {
position: absolute;
right: 0;
top: 0;
width: 195px;
height: 195px;
overflow: hidden
}
.taoplus .tpicons ul li {
position: absolute
}
.taoplus .tpicons a {
display: inline-block;
position: absolute;
width: 40px;
height: 30px
}
.taoplus .tpicons a .num {
position: absolute;
width: 15px;
height: 15px;
font-size: .86rem;
text-align: center;
background: #f40;
color: #fff;
border-radius: 200px;
-webkit-border-radius: 200px
}
.taoplus .tpicons a+.bg {
display: block;
height: 100%;
background-position: -100px 100px
}
.taoplus .tpicons .more {
right: 22px;
bottom: 9px;
width: 76px;
height: 64px
}
.taoplus .tpicons .more a {
top: 20px;
left: 10px
}
.taoplus .tpicons .more a:hover+.bg {
background-position: 0 0
}
.taoplus .tpicons .logis {
left: 22px;
bottom: 10px;
width: 78px;
height: 63px
}
.taoplus .tpicons .logis a {
top: 20px;
left: 30px
}
.taoplus .tpicons .logis a .num {
top: -3px;
left: -8px
}
.taoplus .tpicons .logis a:hover+.bg {
background-position: -80px 0
}
.taoplus .tpicons .ww {
left: 9px;
top: 54px;
width: 51px;
height: 91px
}
.taoplus .tpicons .ww a {
top: 30px;
left: 0
}
.taoplus .tpicons .ww a .num {
top: 0;
left: 8px
}
.taoplus .tpicons .ww a:hover+.bg {
background-position: -165px 0
}
.taoplus .tpicons .individ {
left: 20px;
top: 10px;
width: 79px;
height: 67.5px
}
.taoplus .tpicons .individ a {
top: 15px;
left: 25px
}
.taoplus .tpicons .individ a:hover+.bg {
background-position: 0 -67.5px
}
.taoplus .tpicons .car {
right: 20px;
top: 10px;
width: 77px;
height: 69px
}
.taoplus .tpicons .car a {
top: 15px;
left: 15px
}
.taoplus .tpicons .car a .num {
top: 0;
left: 18px
}
.taoplus .tpicons .car a:hover+.bg {
background-position: 0 -140px
}
.taoplus .tpicons .search {
right: 10px;
top: 56px;
width: 51px;
height: 91px
}
.taoplus .tpicons .search a {
top: 25px;
left: 10px;
z-index: 99
}
.taoplus .tpicons .search a:hover+.bg {
background-position: -165px -95px
}
.taoplus .tplogo {
position: absolute;
left: 58px;
top: 58px;
width: 81px;
height: 82px
}
.taoplus .tplogo a {
position: absolute;
left: 15px;
top: 15px;
display: block;
width: 50px;
height: 50px;
background-position: -100px 100px;
text-indent: -999px;
z-index: 1
}
.taoplus .tplogo a+.bg {
position: absolute;
width: 82px;
height: 82px;
left: 0;
top: 0;
background-position: -100px 100px;
z-index: 0
}
.taoplus .tplogo a:hover+.bg {
background-position: -84px -67px
}
</style>
</head>
<body>
<div id="J_Shade" class="none"></div>
<div id="J_Taojia" class="taoplus">
<div class="circle hide">
<div class="tpicons">
[list]
<li class="more"><a
dataurl="#"></a><span
class="bg"></span>
</li>
<li class="logis"><a
dataurl="#"></a><span
class="bg"></span>
</li>
<li class="ww"><a
dataurl="#"></a><span
class="bg"></span>
</li>
<li class="individ"><a
dataurl="#"></a><span
class="bg"></span>
</li>
<li class="car"><a
dataurl="#"></a><span
class="bg"></span>
</li>
<li class="search"><a
dataurl="#"></a><span
class="bg"></span>
</li>
[/list]
</div>
<div class="tplogo">
<a href="#"></a><span
class="bg"></span>
</div>
</div>
<div class="tpbtn on">
<div>
[list]
<li class="icontao p"></li>
[/list]
</div>
</div>
</div>
<script>
var Taojia=document.getElementById('J_Taojia'), Shade=document.getElementById('J_Shade');
Taojia.addEventListener('click', function () {
var circle=Taojia.querySelector('div[class="circle hide"]'),btn=Taojia.querySelector('div[class="tpbtn on"]');
//debugger;
// Taojia.querySelector('div:nth-child(1)');
if(btn){
btn.setAttribute('class','tpbtn off');
circle.setAttribute('class','circle show');
Shade.setAttribute('class','');
}else{
Taojia.querySelector('div[class="tpbtn off"]').setAttribute('class','tpbtn on');
Taojia.querySelector('div[class="circle show"]').setAttribute('class','circle hide');
Shade.setAttribute('class','none');
}
}, false);
</script>
</body>
</html>
- 大小: 31.7 KB
- 大小: 22.1 KB
- 大小: 12.3 KB
分享到:
相关推荐
jQuery实用的手机触屏滑动导航菜单代码 jQuery实用的手机触屏滑动导航菜单代码
移动端触屏滑动导航菜单
从淘宝网掏出来的代码,没作什么修改,原下载不能直接用,这调了一下,并把代码格式美化。 学习html5和触屏布局的朋友可以参考一下。 记得用google浏览器打开。
jQuery手机触屏滑动导航菜单代码是一款实用的手机移动端左右滑动导航菜单特效。
因为一个项目要使用到触屏滑动的菜单功能,在网上找了大半天没找到比较好的代码,于是自己花了半天时间完成。已经做成jquery对象级插件,很方便调用,比网上那些乱七八糟的代码好用很多,当然代码还有很大调整空间,...
仿淘宝手机触屏版商城静态HTML5页面
H5+mui框架,仿淘宝商城,有注释,菜鸟小白很容易上手。大家不妨下载收藏看看
手机wap网站js触屏自适应TAB菜单特效源码下载
jquery手机触屏版HTML5页面左侧弹出导航菜单代码
android 手机触屏TAB菜单
vue.js点餐智能点餐app手机触屏滑动分类菜单切换代码,代码简单,修改方便!分享给大家,样式效果大家一定是需要的
手机站移动端手机触屏TAB菜单来回切换
CSS3触屏终端多级下拉菜单.zip,若需要使用到自己的软件项目中,需要稍加修改,不修改可能会有冲突。
淘宝客触屏版手机wap购物网站(五套i源码)淘宝客触屏版手机wap购物网站(五套i源码)淘宝客触屏版手机wap购物网站(五套i源码)淘宝客触屏版手机wap购物网站(五套i源码)
touchslider手机TAB触屏切换页面插件 touchslider手机TAB触屏切换页面插件
Recycleview 侧滑菜单,Java代码打造Android手机触屏的 Recycleview 左右侧滑菜单效果,这个在以前的三星机子上见的频繁,现在手机QQ的好友列表中,有此功能,大家可通过手机QQ的列表左右滑动屏幕,可看到额外的菜单...
HTML5触屏滑动页面,绿钻“高富帅”行动,QQ音乐独家专区,QQ音乐MV进阶体验
jqurey手机版触屏滑动效果,适配各个浏览器。可以放心使用。
HTML5左侧展开导航菜单,手机wap网站导航菜单,触屏版HTML5左侧展开导航菜单
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!