基本信息
源码名称：html5移动网站例子源码下载(zepto 框架)
源码大小：0.77M
文件格式：.zip
开发语言：CSS
更新时间：2015-05-25
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
zepto框架 实现的 html5移动站例子源码下载，58同城移动端也是用的这个框架
zepto框架 实现的 html5移动站例子源码下载，58同城移动端也是用的这个框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>邦诚士 - 互联网社区服务</title>
<link href="Content/scrollbar.css" rel="stylesheet" type="text/css" />
<link href="Content/notice.css" rel="stylesheet" type="text/css" />
<script src="Scripts/zeptoall.js" type="text/javascript"></script>
<script src="Scripts/my.js" type="text/javascript"></script>
<script src="Scripts/hammer.js" type="text/javascript"></script>
</head>
<body>
<div class="new_indexTop"></div>
<div class="new_banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href=http://www.baidu.com ><img src="Picture/d5f016cac2c6448ca0b59b89e9f986da.jpg" /></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="new_list">
<ul>
<a href="/Notice.html"><li><img src="Picture/pic1.jpg"></li></a>
<a href="/Activity.html"><li><img src="Picture/pic2.jpg"></li></a>
<a href="/Address.html"><li><img src="Picture/pic3.jpg"></li></a>
<a href=""><li><img src="Picture/pic4.jpg"></li></a>
<a href="/TalentsLib.html"><li><img src="Picture/pic5.jpg"></li></a>
<a href="/WorkGuide.html"><li><img src="Picture/pic6.jpg"></li></a>
</ul>
</div>
<div class="new_inforlist">
<div class="new_h">
<span>社区公告</span>
<a href="/Notice.html">more</a>
</div>
<ul class="list_x">
<li>
<a href="/Notice/Detail/9.html">
<span><img src="Picture/spic1.jpg"></span>
<span>开展60岁老人免费体...</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/Notice/Detail/8.html">
<span><img src="Picture/spic1.jpg"></span>
<span>道路抢修</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/Notice/Detail/7.html">
<span><img src="Picture/spic1.jpg"></span>
<span>停电停水通知</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/Notice/Detail/6.html">
<span><img src="Picture/spic1.jpg"></span>
<span>停水停水停水</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/Notice/Detail/5.html">
<span><img src="Picture/spic1.jpg"></span>
<span>西大街停电通知</span>
<span>2015年5月21日</span>
</a>
</li>
</ul>
</div>
<div class="new_inforlist">
<div class="new_h">
<span>活动信息</span>
<a href="/Activity.html">more</a>
</div>
<ul class="list_x">
<li>
<a href="/Activity/Detail.html?Id=8">
<span><img src="Picture/spic1.jpg"></span>
<span>华通五交化大楼旧家电...</span>
<span>2015年5月23日</span>
</a>
</li>
<li>
<a href="/Activity/Detail.html?Id=7">
<span><img src="Picture/spic1.jpg"></span>
<span>家电促销会</span>
<span>2015年5月23日</span>
</a>
</li>
<li>
<a href="/Activity/Detail.html?Id=6">
<span><img src="Picture/spic1.jpg"></span>
<span>买买买买买买买买</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/Activity/Detail.html?Id=5">
<span><img src="Picture/spic1.jpg"></span>
<span>购购购购购</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/Activity/Detail.html?Id=4">
<span><img src="Picture/spic1.jpg"></span>
<span>折扣折扣折扣</span>
<span>2015年5月21日</span>
</a>
</li>
</ul>
</div>
<div class="new_inforlist">
<div class="new_h">
<span>办事指南</span>
<a href="/WorkGuide.html">more</a>
</div>
<ul class="list_x">
<li>
<a href="/WorkGuide/Detail.html?id=29">
<span><img src="Picture/spic1.jpg"></span>
<span>户籍迁入办理程序</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/WorkGuide/Detail.html?id=28">
<span><img src="Picture/spic1.jpg"></span>
<span>农转非户口办理程序</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/WorkGuide/Detail.html?id=27">
<span><img src="Picture/spic1.jpg"></span>
<span>入户迁入办理程序</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/WorkGuide/Detail.html?id=26">
<span><img src="Picture/spic1.jpg"></span>
<span>户口迁入办理程序</span>
<span>2015年5月21日</span>
</a>
</li>
<li>
<a href="/WorkGuide/Detail.html?id=25">
<span><img src="Picture/spic1.jpg"></span>
<span>子女投靠父母入户程序</span>
<span>2015年5月21日</span>
</a>
</li>
</ul>
</div>
<div class="return">
<div class="returnP"><!--套一层来处理左右padding兼容性好 不要在每个元素上直接加padding会导致错乱-->
<p></p>
<p><a href="javascript:;" id="returnBtn">返回顶部</a></p>
</div>
</div>
<div class="infor">
<div class="select" id="select">
<div><a href="javascript:;" class="current">触屏版</a></div>
<div><a href="javascript:;">电脑版</a></div>
<div><a href="javascript:;">客户端</a></div>
</div>
<div class="adress">CopyRight© 2014-2024 邦诚士版权所有</div>
</div>
<link href="Content/swiper.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swiper.min.js" type="text/javascript"></script>
<script>
window.addEventListener('load', function () {
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
loop: true,
grabCursor: true,
paginationClickable: true,
autoplay: 3000,
autoplayDisableOnInteraction: false
})
function returnFn(id) {
var oBtn = document.getElementById(id);
if (!oBtn) { return false };
var bSys = true; //检测是用户点击还是系统点击的标志
var timer = null;
//如何检测用户拖动了滚动条
window.onscroll = function () {
if (!bSys) {//如果不是系统点击 就说明是用户点击 这时关闭定时器
clearInterval(timer);
}
bSys = false;
};
if (oBtn) {
oBtn.onclick = function () {
timer = setInterval(function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iSpeed = Math.floor(-scrollTop / 8);
if (scrollTop == 0) {
clearInterval(timer);
}
bSys = true;
document.documentElement.scrollTop = document.body.scrollTop = scrollTop iSpeed;
}, 30);
};
}
}
returnFn("returnBtn")
}, false)
function scale() {
var view = document.documentElement.clientWidth || document.body.clientWidth;
var html = document.getElementsByTagName('html')[0];
html.style.fontSize = view / 10 'px';
}
function rient() {
if ("onorientationchange" in window) {
window.onorientationchange = window.onresize = function () {
if (window.orientation == 180 || window.orientation == 0) {
//alert('横')
}
if (window.orientation == 90 || window.orientation == -90) {
//alert('竖')
}
};
}
}
scale();
window.addEventListener('resize', function () {
scale();
}, false)
fient();
</script>
</body>
</html>