首页 > 代码库 > 移动端zepot&媒体查询media queries
移动端zepot&媒体查询media queries
使用zepot做轮播图
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>jd首页</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/base.css">
<link rel="stylesheet" href="http://www.mamicode.com/css/index.css">
<!-- 使用移动端zepto必须引入 -->
<script src=http://www.mamicode.com/‘js/zepto/zepto.min.js‘></script>
<!-- 使用移动端动画必须引入 -->
<script src=http://www.mamicode.com/‘js/zepto/fx.js‘></script>
<!-- 滑动需要引入 -->
<script src=http://www.mamicode.com/‘js/zepto/touch.js‘></script>
<script>
$(function(){
//轮播图的父盒子ul
var lunbo=$(‘.lunbo‘);
//轮播图的索引ul
var selection=$(‘.selection‘);
//宽度
var banner_width=$(‘.banner‘).width();
var index=1;
// 多次出现,封装成函数
var autoMove=function(){
lunbo.animate({‘transform‘:‘translateX(‘+index*-banner_width+‘px)‘},300,‘ease‘, function() {
if(index>=9){
index=1;
lunbo.css({
‘transform‘:‘translateX(‘+index*-banner_width+‘px)‘
})
}else if(index<=0){
index=8;
lunbo.css({
‘transform‘:‘translateX(‘+index*-banner_width+‘px)‘
})
}
// 让索引跟随轮播图变化,轮播图是左右各加一张图,index为1时,小图标的索引为index-1
selection.children(‘li‘).removeClass(‘now‘).eq(index-1).addClass(‘now‘);
if (timerId == undefined) {
timerId = setInterval(function() {
index++;
autoMove();
}, 1000);
}
});
}
//定时器
var timerId=setInterval(function(){
index++;
autoMove();
},1000);
// 左滑,需要清除定时器
$(‘.lunbo‘).swipeLeft(function(){
clearInterval(timerId);
timerId=undefined;
index++;
autoMove();
})
// 右滑,需要清除定时器
$(‘.lunbo‘).swipeRight(function(){
clearInterval(timerId);
timerId=undefined;
index--;
autoMove();
})
})
</script>
</head>
<body>
使用zepot时需要根据使用的事件导入不同的事件的js,[‘swipe‘, ‘swipeLeft‘, ‘swipeRight‘, ‘swipeUp‘, ‘swipeDown‘,
‘doubleTap‘, ‘tap‘, ‘singleTap‘, ‘longTap‘等事件]tap是zepot里的点击事件
媒体查询(响应式的实现)可以根据屏幕大小,调节不同的样式media queries
需要有一个container的class,
@media screen and (min-width: 600px) and (max-width: 900px){
.container{
width: 100%;
max-width:650px;
background-color:hotpink;
}
}
格式,注意and前后都有空格,不能漏写,不能漏写.container{}
bootstrap的网址www.bootcss.com
现在实际开发用的最多的是3.3.5版本,2版本是兼容ie的,以前用的多,
bootstrap的模板页
<!DOCTYPE html>
<!-- 网站的语言 是中文 -->
<html lang="zh-CN">
<head>
<!-- 编码格式是 utf-8 -->
<meta charset="utf-8">
<!-- 使用 最新式 ie 内核渲染
国内某些 所谓的 双核浏览器 或者是 直接 使用webkit去渲染
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口属性
没有设置 禁用 用户缩放, 如果有需求可以添加
-->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">-------------------------------1
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap的模板页</title>
<!-- Bootstrap -->
<link href="http://www.mamicode.com/lib/css/bootstrap.min.css" rel="stylesheet">-----------------------------------2
<!--
media queries 媒体查询
-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
<!-- hack写法 当lt less than 小于 ie9的时候 -->
<!--[if lt IE 9]>---------------------------------------------------------------------------------------------7
<script src="http://www.mamicode.com/lib/js/html5shiv.js"></script> ------------------------------------3
<script src="http://www.mamicode.com/lib/js/respond.js"></script>-------------------------------------4
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) bootstrap是基于jq的-->
<script src="http://www.mamicode.com/lib/js/jquery.min.js"></script>---------------------------------------------5
<!-- Include all compiled plugins (below), or include individual files as needed 导入boot的一些js -->
<script src="http://www.mamicode.com/lib/js/bootstrap.min.js"></script>----------------------------------------------6
可能需要改6处地方,第一处是根据需要可能改自适应宽度,2-6处都是路径需要注意,7处是hack写法,不是注释(less than ie9)
lib文件夹不要忘了创建,导入图标时需要引入fonts文件夹,最前面的三个meta标签必须有,必须在最前面的meta
bootstrap是基于jquery的,所以必须先引入jq
栅格系统
需要加一个class为container-fluid或者container的父元素,container-fluid的宽度时父元素的100%,container宽度为固定宽度,最多可以分为12份,超出12份时,会另起一行,内部实现的原理 就是 float
单元格 需要放在 class = row的 容器中,每一个单元格都是使用‘col-xx-‘数字的方式设置 百分比,其中xx按由小到大的顺序依次为xs,sm,md,lg...xs是分辨率<768px,sm分辨率<992px并且>=768,md分辨率<1200并且>=992,lg分辨率>=1200,详情见网站www.bootcss.com
<div class=‘container-fluid‘>
<div class="row myRow">
<div class="col-md-2 col-sm-4 col-xs-7">.col-md-1</div>
<div class="col-md-3 col-sm-4 col-xs-3">.col-md-1</div>
<div class="col-md-7 col-sm-4 col-xs-2">.col-md-1</div>
</div>
hidden-xs表示xs尺寸的时候隐藏,需要多个尺寸隐藏需要写多个类似的hidden
图标和样式见网站,图标需要添加一个图标名的class,样式可以根据参考代码修改使用
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="http://www.mamicode.com/#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="http://www.mamicode.com/Input">
<input class="btn btn-default" type="submit" value="http://www.mamicode.com/Submit">
移动端zepot&媒体查询media queries