效果图
代码:
<!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
分享到:
相关推荐
这个项目可能还利用了一些第三方库,如Vue Router进行路由管理,使得用户在不同菜单页面间导航时能保持状态。如果涉及到与后端接口的交互,可能还使用了axios等HTTP库进行异步请求,获取菜品详情或其他业务数据。 ...
本篇文章将详细探讨如何使用jQuery来创建一个实用的手机触屏滑动导航菜单。 首先,我们需要了解jQuery的基本用法。jQuery简化了JavaScript的DOM操作,通过链式调用和选择器语法,使得代码更加简洁易读。例如,我们...
淘宝首页网触屏版的HTML5代码是一份用于学习和参考的开源资源,它展示了如何构建适应移动设备的电商网站。HTML5是现代网页开发的标准,具有更好的离线存储、媒体处理、表单控制和响应式设计等功能,使得网页在手机和...
2. 用户交互逻辑:设计时应考虑用户习惯,例如从左侧滑出通常代表返回或主菜单,而从右侧滑出可能包含更多操作或设置。手势的敏感度和反馈也很关键,确保用户能轻松触发菜单而不影响其他操作。 3. 内容布局:菜单...
《jQuery手机触屏滑动导航菜单代码解析》 在当今移动优先的设计趋势下,为手机用户提供流畅、便捷的导航体验至关重要。"jQuery手机触屏滑动导航菜单代码"正是一款解决此类需求的实用工具,它结合了jQuery的强大功能...
【jQuery手机触屏滑动导航菜单代码】是一个专为移动端设计的交互式导航菜单解决方案,它利用了jQuery库的强大功能,使得用户在触屏设备上可以通过左右滑动来浏览和选择菜单项。这个代码实现了一个高效且易于定制的...
因为一个项目要使用到触屏滑动的菜单功能,在网上找了大半天没找到比较好的代码,于是自己花了半天时间完成。已经做成jquery对象级插件,很方便调用,比网上那些乱七八糟的代码好用很多,当然代码还有很大调整空间,...
在手机WAP网站上,这种菜单可以节省空间,提高页面的可读性和可用性。当应用于触屏设备时,良好的交互设计和响应式布局显得尤为重要。 该源码的核心技术是JavaScript(JS),这是一种广泛使用的客户端脚本语言,...
【标题】"仿淘宝手机触屏版商城静态HTML5页面" 涉及的知识点主要集中在Web前端开发领域,特别是针对移动设备的响应式设计和交互体验。在创建这样一个项目时,开发者通常会运用HTML5、CSS3以及JavaScript等核心技术,...
本资源提供的"jquery手机触屏版HTML5页面左侧弹出导航菜单代码"就是一个针对触屏设备优化的解决方案,旨在帮助开发者创建具有高效导航功能的手机网页。 `jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、...
《CSS3在触屏终端实现多级下拉菜单的详细解析》 在现代网页设计中,下拉菜单已经成为导航栏的重要组成部分,特别是在触屏设备上,用户可以通过触摸屏幕轻松访问多级菜单。CSS3(层叠样式表第三版)提供了一系列强大...
触屏版HTML5左侧展开导航菜单是一种常见的网页布局模式,它优化了移动端用户的交互体验,使用户可以轻松地在多个页面间切换。 这个源码资源主要包含以下几个部分: 1. **index.html**:这是网页的主入口文件,其中...
在Android开发中,触屏TAB菜单是用户界面设计中常见的一种元素,用于提供多视图间的切换,增强用户的导航体验。本资源“android手机触屏TAB菜单源码”旨在帮助开发者实现这一功能,通过源码学习可以深入理解其工作...
综上所述,手机站移动端的手机触屏TAB菜单设计涉及到用户体验、界面设计、前端开发、性能优化等多个方面,是移动应用和网站中不可或缺的设计元素。通过合理的设计和实现,能够显著提升用户的操作效率和满意度。
在触屏滑动页面中,良好的视觉设计和响应式布局至关重要,以确保在各种屏幕尺寸和方向下都能提供优秀的用户体验。 `img`和`img3`目录可能分别存放着页面和特定滑块所需的图像资源。在触屏滑动页面中,图像经常被...
Recycleview 侧滑菜单,Java代码打造Android手机触屏的 Recycleview 左右侧滑菜单效果,这个在以前的三星机子上见的频繁,现在手机QQ的好友列表中,有此功能,大家可通过手机QQ的列表左右滑动屏幕,可看到额外的菜单...
针对触屏设备,jQuery提供了多种方法来实现流畅的滑动效果,以增强用户体验。本教程将深入探讨如何利用jQuery实现适用于各种浏览器的手机版触屏滑动效果。 首先,为了在触屏设备上实现滑动效果,我们需要引入jQuery...
解压后,开发者可以通过查看和修改这些文件来学习和自定义这个触屏导航菜单的实现方式。为了在自己的项目中使用此功能,需要将这些代码集成到现有的HTML页面结构中,并确保引入了jQuery库。同时,还需要考虑浏览器...
悬浮球菜单则是另一种创新的设计,通常出现在触屏设备上,它以一个小球形式悬浮在屏幕边缘,当用户点击或触摸时,菜单会弹出。在Qt中,可以使用QWidget或QQuickItem来创建这个悬浮球,并利用信号和槽机制响应用户的...
这个特效通常应用于响应式网站或者移动应用,通过滑动手势从屏幕边缘拉出或隐藏侧边栏菜单,使得用户可以方便地在各个页面之间切换。 HTML5是超文本标记语言的最新版本,它引入了许多新特性,如语义化元素、离线...