滑动页面及高度无法同步的bug修正
2013-04-05 00:49
127 查看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>
<title>html5示例</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.bodys {
width: 320px;
}
.header {
background: #EC8107;
position: relative;
height: 44px;
width: 100%;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 44px;
}
.intro {
border-left: #A3A3A3 1px solid;
border-right: #A3A3A3 1px solid;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
background-color: rgb(255,255,255);
vertical-align: baseline;
font: 13px/18px 微软雅黑, 'Microsoft YaHei', Arial, Georgia, Verdana, serif;
color: rgb(70,70,70);
text-transform: none;
text-indent: 0px;
letter-spacing: normal;
white-space: normal;
word-spacing: 0px;
widows: 2;
orphans: 2;
-webkit-text-size-adjust: none;
-webkit-text-stroke-width: 0px;
}
.section_head {
border: #A3A3A3 1px solid;
/*background: url('images/bg.png') repeat-x scroll 0 -135px transparent;
background:-webkit-linear-gradient(top,white , orange, yellow, green, white);
background:-moz-linear-gradient(top,white , orange, yellow, green, white);
background:-o-linear-gradient(top,white , orange, yellow, green, white);
background:linear-gradient(top,white , orange, yellow, green, white);
*/
background-image:url('images/titleDiv.gif');
height: 23px;
line-height: 23px;
padding: 0 10px;
font-size: 16px;
color: #EC8107;
border-style: ridge;
}
.section_body {
background-color: #EEEEEE;
background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE);
background-image: -webkit-linear-gradient(center top , #FFFFFF, #EEEEEE);
border: 1px solid #E3E3E3;
color: #333333;
margin-bottom: 1px;
}
.content {
background-color: #EEEEEE;
padding-bottom: 4px;
}
.content_title {
margin-left: 10px;
border: 0 none;
padding: 4px 0;
font-size: 16px;
line-height: 24px;
}
.content_intro {
color: #666666;
font-size: 12px;
padding: 3px 0;
}
.footer {
background: #EC8107;
height: 44px;
width: 100%;
text-align: center;
color: #fff;
font-size: 12px;
line-height: 44px;
}
.bodys{
-webkit-animation:animations1 0.2s ease-in 0s 5;
animation:animations1 0.2s ease-in 0s 5;
}
@-webkit-keyframes animations1{
0%{
-webkit-transform: translate(0,-700px) rotate(0deg) scale(0.1,0.1);
}
5%{
-webkit-transform: translate(0,-700px) rotate(20deg) scale(0.1,0.1);
}
10%{
-webkit-transform: translate(0,-700px) rotate(40deg) scale(0.1,0.1) ;
}
15%{
-webkit-transform: translate(0,-700px) rotate(60deg) scale(0.1,0.1);
}
20%{
-webkit-transform: translate(0,-700px) rotate(80deg) scale(0.1,0.1);
}
25%{
-webkit-transform: translate(0,-700px) rotate(100deg) scale(0.1,0.1);
}
30%{
-webkit-transform: translate(0,-700px) rotate(120deg) scale(0.1,0.1);
}
35%{
-webkit-transform: translate(0,-700px) rotate(140deg) scale(0.1,0.1);
}
40%{
-webkit-transform: translate(0,-700px) rotate(160deg) scale(0.1,0.1);
}
45%{
-webkit-transform: translate(0,-700px) rotate(180deg) scale(0.1,0.1);
}
50%{
-webkit-transform: translate(0,-700px) rotate(200deg) scale(0.1,0.1);
}
55%{
-webkit-transform: translate(0,-700px) rotate(220deg) scale(0.1,0.1);
}
60%{
-webkit-transform: translate(0,-700px) rotate(240deg) scale(0.1,0.1);
}
60%{
-webkit-transform: translate(0,-700px) rotate(260deg) scale(0.1,0.1);
}
70%{
-webkit-transform: translate(0,-700px) rotate(280deg) scale(0.1,0.1);
}
75%{
-webkit-transform: translate(0,-700px) rotate(300deg) scale(0.1,0.1);
}
80%{
-webkit-transform: translate(0,-700px) rotate(320deg) scale(0.1,0.1);
}
85%{
-webkit-transform: translate(0,-700px) rotate(340deg) scale(0.1,0.1);
}
90%{
-webkit-transform: translate(0,-700px) rotate(360deg) scale(0.1,0.1);
}
100%{
-webkit-transform: translate(0,-700px) rotate(380deg) scale(0.1,0.1);
}
}
@keyframes animations1{
0%{
transform: translate(0,-700px) rotate(0deg) scale(0.1,0.1);
}
5%{
transform: translate(0,-700px) rotate(20deg) scale(0.1,0.1);
}
10%{
transform: translate(0,-700px) rotate(40deg) scale(0.1,0.1) ;
}
15%{
transform: translate(0,-700px) rotate(60deg) scale(0.1,0.1);
}
20%{
transform: translate(0,-700px) rotate(80deg) scale(0.1,0.1);
}
25%{
transform: translate(0,-700px) rotate(100deg) scale(0.1,0.1);
}
30%{
transform: translate(0,-700px) rotate(120deg) scale(0.1,0.1);
}
35%{
transform: translate(0,-700px) rotate(140deg) scale(0.1,0.1);
}
40%{
transform: translate(0,-700px) rotate(160deg) scale(0.1,0.1);
}
45%{
transform: translate(0,-700px) rotate(180deg) scale(0.1,0.1);
}
50%{
transform: translate(0,-700px) rotate(200deg) scale(0.1,0.1);
}
55%{
transform: translate(0,-700px) rotate(220deg) scale(0.1,0.1);
}
60%{
transform: translate(0,-700px) rotate(240deg) scale(0.1,0.1);
}
60%{
transform: translate(0,-700px) rotate(260deg) scale(0.1,0.1);
}
70%{
transform: translate(0,-700px) rotate(280deg) scale(0.1,0.1);
}
75%{
transform: translate(0,-700px) rotate(300deg) scale(0.1,0.1);
}
80%{
transform: translate(0,-700px) rotate(320deg) scale(0.1,0.1);
}
85%{
transform: translate(0,-700px) rotate(340deg) scale(0.1,0.1);
}
90%{
transform: translate(0,-700px) rotate(360deg) scale(0.1,0.1);
}
100%{
transform: translate(0,-700px) rotate(380deg) scale(0.1,0.1);
}
}
a:link,a:visited{font-size:14px;color:#999999;text-decoration:none;}
a:hover{text-decoration:underline;}
.top_title a:link,a:visited{font-size:18px;color:#996666;text-decoration:none;}
.top_title span a{
color: #fff;
}
#top_title span{
margin-top:10px;
/*background-image: url("images/titleDiv.gif") ;*/
height: 23px;
width:140px;
margin-left:10px;
display:block;
float:left;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 3px 5px 60px 40px #000 inset,
-moz-box-shadow:0px 1px 6px 4px black inset,
box-shadow: 3px 5px 60px 40px #000 inset,
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.top_title{
position: relative;
height:40px;
width: 320px;
background-color:black;
margin-top: 5px;
}
.li_list{
position:relative;
list-style: none;
left: -40px;
}
.active{
background-color: yellow;
}
span a{
display:block;
color:black;
}
.swipe{
position:relative;
width: 400px;
}
.li_body{
position:absolute;
width: 320px;
float: left;
margin-top: -15px;
}
</style>
<script type="text/javascript">
/* $(function(){
$('.top_title span').click(function(){
//$('.top_title span').css('background-image', '")');
$('.top_title span').find('a').css('color','#fff');
$('.top_title span').css('background-color','black');
//$(this).css({'background-image':'url()'});
$(this).css('background-color','yellow');
$(this).find('a').css('color','#000');
});
}); */
$(function(){
$('.section_head').click(function(){
var sectionbodys = $(this).nextAll('.section_body')
if(sectionbodys.css('display')=='none'){
sectionbodys.css('display','block');
}else{
sectionbodys.css('display','none');
}
});
(function psize(){
$('.swipe').css('height', $('.li_body').css('height'));
})();
});
</script>
</head>
<body>
<div class="bodys">
<header class="header">HTML 5 手机特性展示示例</header>
<div class="top_title" id="top_title" >
<span class="active" ><a href="#">IOS支持特性</a></span>
<span><a href="#">Andriod支持特性</a></span>
<div style="clear:both"></div>
</div>
<div class="intro"> 电脑建议使用chrome浏览器访问；安卓操作系统的手机建议使用安卓4.0以上版本手机测试</div>
<div id="slider1" class="swipe">
<ul class="piclist">
<li class="li_list">
<div class="li_body" >
<div>
<div class="section_head">地图的调用</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/2.html">距离跟踪</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例UC浏览器测试通过；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/3.html">谷歌地图定位</a></div>
<div class="content_intro"> gps与google地图相结合,定位用户地理位置</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/near.html">百度地图定位及签到</a></div>
<div class="content_intro"> 定位用户当前位置及附近地理信息</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">重力感应</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/2.html">重力感应换背景</a></div>
<div class="content_intro"> 根据设备自身的加速信息切换背景颜色</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/xiuyet/xiuyet.html">重力感应球</a></div>
<div class="content_intro"> 利用设备的物理方向信息及加速度来控制球的运动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">陀螺仪</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/3.html">3维图片</a></div>
<div class="content_intro"> 根据设备自身的位置来立体展示图片</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">多媒体</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="3.html">播放音乐</a></div>
<div class="content_intro"> 利用html5自带标签进行音乐播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="4.html">播放视频</a></div>
<div class="content_intro"> 利用html5自带标签进行视频播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href=" ">视频浏览器</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">动画特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhuan/index.html">html5转盘游戏</a></div>
<div class="content_intro"> 基于html5制作的网页游戏</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="photo/index.html">照片展示</a></div>
<div class="content_intro"> 基于css3实现照片的展示功能</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="clock/clock.html">时钟</a></div>
<div class="content_intro"> 基于画布实现动态时钟</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">其它特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="form/form1.html">注册表单</a></div>
<div class="content_intro"> 基于新增标签属性实现的注册表单</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="local/zhendong.html">震动</a></div>
<div class="content_intro"> 让手机震起来</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchscrol.html">内嵌滑动页面</a></div>
<div class="content_intro"> 使页面内容随意滑动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touch1.html">滑动照片</a></div>
<div class="content_intro"> 使图片能够滑动的浏览</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchpage.html">滑动tab页</a></div>
<div class="content_intro"> 滑动切换页面内容</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/bingtu.html">智能饼图</a></div>
<div class="content_intro"> 基于画布的动态饼图</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<footer class="footer">北京宽连十方数字技术有限公司</footer>
</div>
</li>
<li class="li_list" >
<div class="li_body" >
<div>
<div class="section_head">地图的调用</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/2.html">距离跟踪</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例UC浏览器测试通过；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/3.html">谷歌地图定位</a></div>
<div class="content_intro"> gps与google地图相结合,定位用户地理位置</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/near.html">百度地图定位及签到</a></div>
<div class="content_intro"> 定位用户当前位置及附近地理信息</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">重力感应</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/2.html">重力感应换背景</a></div>
<div class="content_intro"> 根据设备自身的加速信息切换背景颜色</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/xiuyet/xiuyet.html">重力感应球</a></div>
<div class="content_intro"> 利用设备的物理方向信息及加速度来控制球的运动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">陀螺仪</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/3.html">3维图片</a></div>
<div class="content_intro"> 根据设备自身的位置来立体展示图片</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">多媒体</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="3.html">播放音乐</a></div>
<div class="content_intro"> 利用html5自带标签进行音乐播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="4.html">播放视频</a></div>
<div class="content_intro"> 利用html5自带标签进行视频播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href=" ">视频浏览器</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">动画特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhuan/index.html">html5转盘游戏</a></div>
<div class="content_intro"> 基于html5制作的网页游戏</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="photo/index.html">照片展示</a></div>
<div class="content_intro"> 基于css3实现照片的展示功能</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="clock/clock.html">时钟</a></div>
<div class="content_intro"> 基于画布实现动态时钟</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">其它特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="form/form1.html">注册表单</a></div>
<div class="content_intro"> 基于新增标签属性实现的注册表单</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="local/zhendong.html">震动</a></div>
<div class="content_intro"> 让手机震起来</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchscrol.html">内嵌滑动页面</a></div>
<div class="content_intro"> 使页面内容随意滑动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touch1.html">滑动照片</a></div>
<div class="content_intro"> 使图片能够滑动的浏览</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchpage.html">滑动tab页</a></div>
<div class="content_intro"> 滑动切换页面内容</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/bingtu.html">智能饼图</a></div>
<div class="content_intro"> 基于画布的动态饼图</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<footer class="footer"></footer>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var spans = document.getElementsByTagName('span');
for(var s in spans){
if(spans[s].className=='active'){
spans[s].getElementsByTagName('a')[0].style.color='black';
}
}
var n=1;
var page = 'top_title';
var mslide = 'slider' + n;
var mtitle = 'emtitle' + n;
arrdiv = 'arrdiv' + n;
var as = document.getElementById(page).getElementsByTagName('a');
var tt = new TouchSlider({
id : mslide,
'auto' : '-1',
fx : 'ease-out',
direction : 'left',
speed : 600,
timeout : 5000,
'before' : function(index) {
var as = document.getElementById(this.page)
.getElementsByTagName('span');
as[this.p].className = '';
as[this.p].getElementsByTagName('a')[0].style.color='#fff';
as[index].className = 'active';
as[index].getElementsByTagName('a')[0].style.color='black';
this.p = index;
/*
var txt = as[index].innerText;
$("#" + this.page).parent().find('.emtitle').text(txt);
var txturl = as[index].getAttribute('href');
var turl = txturl.split('#');
$("#" + this.page).parent().find('.go_btn').attr('href',
turl[1]);
*/
}
});
tt.page = page;
tt.p = 0;
//console.dir(tt); console.dir(tt.__proto__);
for ( var i = 0; i < as.length; i++) {
(function() {
var j = i;
as[j].tt = tt;
as[j].onclick = function() {
this.tt.slide(j);
return false;
}
})();
}
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>
<title>html5示例</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.bodys {
width: 320px;
}
.header {
background: #EC8107;
position: relative;
height: 44px;
width: 100%;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 44px;
}
.intro {
border-left: #A3A3A3 1px solid;
border-right: #A3A3A3 1px solid;
margin: 0px;
padding-top: 20px;
padding-bottom: 20px;
background-color: rgb(255,255,255);
vertical-align: baseline;
font: 13px/18px 微软雅黑, 'Microsoft YaHei', Arial, Georgia, Verdana, serif;
color: rgb(70,70,70);
text-transform: none;
text-indent: 0px;
letter-spacing: normal;
white-space: normal;
word-spacing: 0px;
widows: 2;
orphans: 2;
-webkit-text-size-adjust: none;
-webkit-text-stroke-width: 0px;
}
.section_head {
border: #A3A3A3 1px solid;
/*background: url('images/bg.png') repeat-x scroll 0 -135px transparent;
background:-webkit-linear-gradient(top,white , orange, yellow, green, white);
background:-moz-linear-gradient(top,white , orange, yellow, green, white);
background:-o-linear-gradient(top,white , orange, yellow, green, white);
background:linear-gradient(top,white , orange, yellow, green, white);
*/
background-image:url('images/titleDiv.gif');
height: 23px;
line-height: 23px;
padding: 0 10px;
font-size: 16px;
color: #EC8107;
border-style: ridge;
}
.section_body {
background-color: #EEEEEE;
background-image: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE);
background-image: -webkit-linear-gradient(center top , #FFFFFF, #EEEEEE);
border: 1px solid #E3E3E3;
color: #333333;
margin-bottom: 1px;
}
.content {
background-color: #EEEEEE;
padding-bottom: 4px;
}
.content_title {
margin-left: 10px;
border: 0 none;
padding: 4px 0;
font-size: 16px;
line-height: 24px;
}
.content_intro {
color: #666666;
font-size: 12px;
padding: 3px 0;
}
.footer {
background: #EC8107;
height: 44px;
width: 100%;
text-align: center;
color: #fff;
font-size: 12px;
line-height: 44px;
}
.bodys{
-webkit-animation:animations1 0.2s ease-in 0s 5;
animation:animations1 0.2s ease-in 0s 5;
}
@-webkit-keyframes animations1{
0%{
-webkit-transform: translate(0,-700px) rotate(0deg) scale(0.1,0.1);
}
5%{
-webkit-transform: translate(0,-700px) rotate(20deg) scale(0.1,0.1);
}
10%{
-webkit-transform: translate(0,-700px) rotate(40deg) scale(0.1,0.1) ;
}
15%{
-webkit-transform: translate(0,-700px) rotate(60deg) scale(0.1,0.1);
}
20%{
-webkit-transform: translate(0,-700px) rotate(80deg) scale(0.1,0.1);
}
25%{
-webkit-transform: translate(0,-700px) rotate(100deg) scale(0.1,0.1);
}
30%{
-webkit-transform: translate(0,-700px) rotate(120deg) scale(0.1,0.1);
}
35%{
-webkit-transform: translate(0,-700px) rotate(140deg) scale(0.1,0.1);
}
40%{
-webkit-transform: translate(0,-700px) rotate(160deg) scale(0.1,0.1);
}
45%{
-webkit-transform: translate(0,-700px) rotate(180deg) scale(0.1,0.1);
}
50%{
-webkit-transform: translate(0,-700px) rotate(200deg) scale(0.1,0.1);
}
55%{
-webkit-transform: translate(0,-700px) rotate(220deg) scale(0.1,0.1);
}
60%{
-webkit-transform: translate(0,-700px) rotate(240deg) scale(0.1,0.1);
}
60%{
-webkit-transform: translate(0,-700px) rotate(260deg) scale(0.1,0.1);
}
70%{
-webkit-transform: translate(0,-700px) rotate(280deg) scale(0.1,0.1);
}
75%{
-webkit-transform: translate(0,-700px) rotate(300deg) scale(0.1,0.1);
}
80%{
-webkit-transform: translate(0,-700px) rotate(320deg) scale(0.1,0.1);
}
85%{
-webkit-transform: translate(0,-700px) rotate(340deg) scale(0.1,0.1);
}
90%{
-webkit-transform: translate(0,-700px) rotate(360deg) scale(0.1,0.1);
}
100%{
-webkit-transform: translate(0,-700px) rotate(380deg) scale(0.1,0.1);
}
}
@keyframes animations1{
0%{
transform: translate(0,-700px) rotate(0deg) scale(0.1,0.1);
}
5%{
transform: translate(0,-700px) rotate(20deg) scale(0.1,0.1);
}
10%{
transform: translate(0,-700px) rotate(40deg) scale(0.1,0.1) ;
}
15%{
transform: translate(0,-700px) rotate(60deg) scale(0.1,0.1);
}
20%{
transform: translate(0,-700px) rotate(80deg) scale(0.1,0.1);
}
25%{
transform: translate(0,-700px) rotate(100deg) scale(0.1,0.1);
}
30%{
transform: translate(0,-700px) rotate(120deg) scale(0.1,0.1);
}
35%{
transform: translate(0,-700px) rotate(140deg) scale(0.1,0.1);
}
40%{
transform: translate(0,-700px) rotate(160deg) scale(0.1,0.1);
}
45%{
transform: translate(0,-700px) rotate(180deg) scale(0.1,0.1);
}
50%{
transform: translate(0,-700px) rotate(200deg) scale(0.1,0.1);
}
55%{
transform: translate(0,-700px) rotate(220deg) scale(0.1,0.1);
}
60%{
transform: translate(0,-700px) rotate(240deg) scale(0.1,0.1);
}
60%{
transform: translate(0,-700px) rotate(260deg) scale(0.1,0.1);
}
70%{
transform: translate(0,-700px) rotate(280deg) scale(0.1,0.1);
}
75%{
transform: translate(0,-700px) rotate(300deg) scale(0.1,0.1);
}
80%{
transform: translate(0,-700px) rotate(320deg) scale(0.1,0.1);
}
85%{
transform: translate(0,-700px) rotate(340deg) scale(0.1,0.1);
}
90%{
transform: translate(0,-700px) rotate(360deg) scale(0.1,0.1);
}
100%{
transform: translate(0,-700px) rotate(380deg) scale(0.1,0.1);
}
}
a:link,a:visited{font-size:14px;color:#999999;text-decoration:none;}
a:hover{text-decoration:underline;}
.top_title a:link,a:visited{font-size:18px;color:#996666;text-decoration:none;}
.top_title span a{
color: #fff;
}
#top_title span{
margin-top:10px;
/*background-image: url("images/titleDiv.gif") ;*/
height: 23px;
width:140px;
margin-left:10px;
display:block;
float:left;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 3px 5px 60px 40px #000 inset,
-moz-box-shadow:0px 1px 6px 4px black inset,
box-shadow: 3px 5px 60px 40px #000 inset,
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.top_title{
position: relative;
height:40px;
width: 320px;
background-color:black;
margin-top: 5px;
}
.li_list{
position:relative;
list-style: none;
left: -40px;
}
.active{
background-color: yellow;
}
span a{
display:block;
color:black;
}
.swipe{
position:relative;
width: 400px;
}
.li_body{
position:absolute;
width: 320px;
float: left;
margin-top: -15px;
}
</style>
<script type="text/javascript">
/* $(function(){
$('.top_title span').click(function(){
//$('.top_title span').css('background-image', '")');
$('.top_title span').find('a').css('color','#fff');
$('.top_title span').css('background-color','black');
//$(this).css({'background-image':'url()'});
$(this).css('background-color','yellow');
$(this).find('a').css('color','#000');
});
}); */
$(function(){
$('.section_head').click(function(){
var sectionbodys = $(this).nextAll('.section_body')
if(sectionbodys.css('display')=='none'){
sectionbodys.css('display','block');
}else{
sectionbodys.css('display','none');
}
});
(function psize(){
$('.swipe').css('height', $('.li_body').css('height'));
})();
});
</script>
</head>
<body>
<div class="bodys">
<header class="header">HTML 5 手机特性展示示例</header>
<div class="top_title" id="top_title" >
<span class="active" ><a href="#">IOS支持特性</a></span>
<span><a href="#">Andriod支持特性</a></span>
<div style="clear:both"></div>
</div>
<div class="intro"> 电脑建议使用chrome浏览器访问；安卓操作系统的手机建议使用安卓4.0以上版本手机测试</div>
<div id="slider1" class="swipe">
<ul class="piclist">
<li class="li_list">
<div class="li_body" >
<div>
<div class="section_head">地图的调用</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/2.html">距离跟踪</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例UC浏览器测试通过；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/3.html">谷歌地图定位</a></div>
<div class="content_intro"> gps与google地图相结合,定位用户地理位置</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/near.html">百度地图定位及签到</a></div>
<div class="content_intro"> 定位用户当前位置及附近地理信息</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">重力感应</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/2.html">重力感应换背景</a></div>
<div class="content_intro"> 根据设备自身的加速信息切换背景颜色</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/xiuyet/xiuyet.html">重力感应球</a></div>
<div class="content_intro"> 利用设备的物理方向信息及加速度来控制球的运动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">陀螺仪</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/3.html">3维图片</a></div>
<div class="content_intro"> 根据设备自身的位置来立体展示图片</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">多媒体</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="3.html">播放音乐</a></div>
<div class="content_intro"> 利用html5自带标签进行音乐播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="4.html">播放视频</a></div>
<div class="content_intro"> 利用html5自带标签进行视频播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href=" ">视频浏览器</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">动画特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhuan/index.html">html5转盘游戏</a></div>
<div class="content_intro"> 基于html5制作的网页游戏</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="photo/index.html">照片展示</a></div>
<div class="content_intro"> 基于css3实现照片的展示功能</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="clock/clock.html">时钟</a></div>
<div class="content_intro"> 基于画布实现动态时钟</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">其它特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="form/form1.html">注册表单</a></div>
<div class="content_intro"> 基于新增标签属性实现的注册表单</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="local/zhendong.html">震动</a></div>
<div class="content_intro"> 让手机震起来</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchscrol.html">内嵌滑动页面</a></div>
<div class="content_intro"> 使页面内容随意滑动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touch1.html">滑动照片</a></div>
<div class="content_intro"> 使图片能够滑动的浏览</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchpage.html">滑动tab页</a></div>
<div class="content_intro"> 滑动切换页面内容</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/bingtu.html">智能饼图</a></div>
<div class="content_intro"> 基于画布的动态饼图</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<footer class="footer">北京宽连十方数字技术有限公司</footer>
</div>
</li>
<li class="li_list" >
<div class="li_body" >
<div>
<div class="section_head">地图的调用</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/2.html">距离跟踪</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例UC浏览器测试通过；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/3.html">谷歌地图定位</a></div>
<div class="content_intro"> gps与google地图相结合,定位用户地理位置</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="geolocation/near.html">百度地图定位及签到</a></div>
<div class="content_intro"> 定位用户当前位置及附近地理信息</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">重力感应</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/2.html">重力感应换背景</a></div>
<div class="content_intro"> 根据设备自身的加速信息切换背景颜色</div>
<div class="content_intro"> 本示例UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/xiuyet/xiuyet.html">重力感应球</a></div>
<div class="content_intro"> 利用设备的物理方向信息及加速度来控制球的运动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">陀螺仪</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhongli/3.html">3维图片</a></div>
<div class="content_intro"> 根据设备自身的位置来立体展示图片</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">多媒体</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="3.html">播放音乐</a></div>
<div class="content_intro"> 利用html5自带标签进行音乐播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="4.html">播放视频</a></div>
<div class="content_intro"> 利用html5自带标签进行视频播放</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href=" ">视频浏览器</a></div>
<div class="content_intro"> 能够跟踪用户，检测用户出行的距离；</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">动画特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="zhuan/index.html">html5转盘游戏</a></div>
<div class="content_intro"> 基于html5制作的网页游戏</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="photo/index.html">照片展示</a></div>
<div class="content_intro"> 基于css3实现照片的展示功能</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="clock/clock.html">时钟</a></div>
<div class="content_intro"> 基于画布实现动态时钟</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<div>
<div class="section_head">其它特效</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="form/form1.html">注册表单</a></div>
<div class="content_intro"> 基于新增标签属性实现的注册表单</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="local/zhendong.html">震动</a></div>
<div class="content_intro"> 让手机震起来</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchscrol.html">内嵌滑动页面</a></div>
<div class="content_intro"> 使页面内容随意滑动</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touch1.html">滑动照片</a></div>
<div class="content_intro"> 使图片能够滑动的浏览</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="touch/touchpage.html">滑动tab页</a></div>
<div class="content_intro"> 滑动切换页面内容</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
<div class="section_body">
<div class="content">
<div class="content_title"><a href="demo/bingtu.html">智能饼图</a></div>
<div class="content_intro"> 基于画布的动态饼图</div>
<div class="content_intro"> 本示例使用了Safari、UC浏览器进行了测试；</div>
</div>
</div>
</div>
<footer class="footer"></footer>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var spans = document.getElementsByTagName('span');
for(var s in spans){
if(spans[s].className=='active'){
spans[s].getElementsByTagName('a')[0].style.color='black';
}
}
var n=1;
var page = 'top_title';
var mslide = 'slider' + n;
var mtitle = 'emtitle' + n;
arrdiv = 'arrdiv' + n;
var as = document.getElementById(page).getElementsByTagName('a');
var tt = new TouchSlider({
id : mslide,
'auto' : '-1',
fx : 'ease-out',
direction : 'left',
speed : 600,
timeout : 5000,
'before' : function(index) {
var as = document.getElementById(this.page)
.getElementsByTagName('span');
as[this.p].className = '';
as[this.p].getElementsByTagName('a')[0].style.color='#fff';
as[index].className = 'active';
as[index].getElementsByTagName('a')[0].style.color='black';
this.p = index;
/*
var txt = as[index].innerText;
$("#" + this.page).parent().find('.emtitle').text(txt);
var txturl = as[index].getAttribute('href');
var turl = txturl.split('#');
$("#" + this.page).parent().find('.go_btn').attr('href',
turl[1]);
*/
}
});
tt.page = page;
tt.p = 0;
//console.dir(tt); console.dir(tt.__proto__);
for ( var i = 0; i < as.length; i++) {
(function() {
var j = i;
as[j].tt = tt;
as[j].onclick = function() {
this.tt.slide(j);
return false;
}
})();
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ViewPager的BUG ：点住TextView后无法滑动
- 页面有两个RecyclerView无法正常显示且镶嵌ScrollView滑动异常问题
- SlidingMenu开源控件侧拉栏无法滑动问题修复,bug解决
- Android解决ViewPager页面滑动空白bug和图片点击bug
- 解决ECSHOPdz bug ,无法与其他产品同步退出
- 修正ECMALL在PHP5.3以上版本中无法开启支付方式的BUG
- 使页面左右无法滑动（手机端）
- FastDFS 5.02 Storage Server 无法同步，有BUG，请大家及时升级
- Unity BUG解决——从数据库中加载数据的时候无法同步显示到UI上
- 117 FP页面无法查看 此错误是JDK8.0.0.0版本的一个BUG，会导致工单重复回写，
- 5、Firefox浏览器中无法撑开高度问题的解决方法。 [解决bug的方法和对浏览器兼容性的技能]
- ionic版本从v1.0.0升级到v1.2.4后,android上使用<ion-content>的页面无法滑动
- JAVA_OA(十四):SSM练手项目bug-Oracle分页web页面无法转到下一页
- swiper实现h5页面分屏应用，当一屏内容太多无法滑动显示
- 解决PDFToFlex源程序的小BUG——页面控制的最后两页无法正常切换问题
- 移动端jQuery修正Web页面滑动时div问题的两则实例
- 微信小程序入门bug--页面跳转，js数据无法在wxml中出现
- 解决ios下html5的ifream页面无法滑动的问题
- 微信开发-苹果手机无法滑动页面
- 彩视页面遇到的 导航栏高亮 和单页面导航栏 滑动到页面某高度的方法