<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5手机端点击图标环形菜单代码 - 网页模板</title>
<script src="js/zepto_1.1.3.js"></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
window.onload=function(){
$(".one").on("tap",function(){
$(".box-listp").css({width:15,height:15,opacity:0,top:0,left:0,right:0,bottom:0,margin:"auto"})
})
$(".box-list1").on('tap',function(){
$(".box-list2").css({top:-120,left:-120});
$(".box-list3").css({top:140,left:-20});
$(".box-list4").css({top:90,right:-90});
$(".box-list5").css({top:-100,right:-80});
$(".box-list6").css({bottom:-60,left:-150});
$(".box-listp").css({width:45,height:45,opacity:1});
})
}
</script>
<style>
.box{
width:400px;
height:400px;
background:url(img/bj1.jpg) no-repeat;
background-size:contain;
margin:100px auto;
}
.box-con{
width:380px;
height:40px;
float:left;
position:relative;
margin-left:10px;
}
.one{
width:60px;
height:25px;
line-height:25px;
background:red;
font-family:"eras medium itc";
text-align:center;
color:#fff;
position:absolute;bottom:0;right:0;
transition:all 2s;
cursor:pointer;
}
.box-con2{
width:100%;
height:100px;
margin:20px auto;
float:left;
}
.box-list{
width:200px;
height:240px;
overflow:hidden;
margin:0 auto;
position:relative;
}
.box-list1{
border-radius:50%;
width:46px;
height:50px;
background:url(img/2.png);
background-size:contain;
position:absolute;
left:0;right:0;bottom:0;top:0;
margin:auto;
z-index:5;
}
.box-listp{
width:10px;
height:10px;
border-radius:50%;
position:absolute;
opacity:0;
transition:all 1s cubic-bezier(.61,1.81,.56,-0.33);
top:0;right:0;left:0;
bottom:0;margin:auto;
}
.box-list2{
background:url(img/6.jpg);
background-size:contain;
}
.box-list3{
background:url(img/1.jpg);
background-size:contain;
}
.box-list4{
background:url(img/4.jpg);
background-size:contain;
}
.box-list5{
background:url(img/7.jpg);
background-size:contain;
}
.box-list6{
background:url(img/5.jpg);
background-size:contain;
}
</style>
</head>
<body style="background:#fafafa">
<div class="box">
<div class="box-con">
<div class="one">close</div>
</div>
<div class="box-con2">
<div class="box-list">
<div class="box-list1"></div>
<div class="box-list2 box-listp"></div>
<div class="box-list3 box-listp"></div>
<div class="box-list4 box-listp"></div>
<div class="box-list5 box-listp"></div>
<div class="box-list6 box-listp"></div>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
html5手机端点击图标环形菜单代码.zip
版权申诉
144 浏览量
2022-11-18
22:13:53
上传
评论
收藏 216KB ZIP 举报
html5手机端点击图标环形菜单代码.zip （11个子文件） 
html5手机端点击图标环形菜单代码 jiaoben4477 img 
1.jpg 70KB 6.jpg 11KB 5.jpg 7KB 4.jpg 10KB bj1.jpg 12KB
2.png 16KB 7.jpg 19KB
index.html 3KB js 
mui.min.js 113KB zepto_1.1.3.js 53KB html5手机端点击图标环形菜单代码.jpg 32KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 【password输入框的显示和关闭功能进行优化】
- tomcat安装及配置教程教程.docx
- CheckInPage.fxml
- Matlab与 Fortran的混合编程及其应用
- dafsbkljkfafsfsf
- 用Swift Palyground学习编程（初级）
- labview简易计算器，类似于windows自带的计算器 浙理工同学可以无脑下载
- Java编程思想笔记(全)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本121.0.6154.0)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本121.0.6150.0)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
