实例介绍
【实例简介】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>
好例子网口号：伸出你的我的手 — 分享！
网友评论
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)