[原创]zepto打造一款移动端划屏插件 - wingkun

标签: 原创 zepto 移动 | 发表时间:2014-08-14 08:06 | 作者:wingkun
出处:

最近忙着将项目内的jquery 2换成zepto

因为不想引用过多的zepto包,所以花了点时间

zepto真的精简了许多,源代码看着真舒服

 

正好项目内需要一个划屏插件,就用zepto写了一个

逻辑其实很简单,但没想到测试时,在老版本android设备浏览器上的touchmove有许多bug

做兼容倒是搞了一阵

效果图

样式1

样式2

 

调用

正常情况下应该是后台生成的html代码,但还是写了一套操作tab页的方法

调用简便如下:

<link rel="stylesheet" href="kslider.css" type="text/css"/>
<script type="text/javascript" src="http://zeptojs.com/zepto.js"></script>
<script type="text/javascript" src="zepto.kslider.js"></script>
<script type="text/javascript">
var k;

$(function () {

/*
参数:config

change:tab页变更事件
参数e: 当前页码
tick:自动滚动间隔时间毫秒 (不设置则不自动滚动)
maxWidth:容器最大宽度 (默认有100%)
minWidth:容器最小宽度 (默认有100%)
className:样式类名
"ks_wt_1" 标题栏-方形 (默认)
"ks_wt_2" 标题栏-小圆形
或者你自定义的类名

*/

k = $("#divs1").slider({ change: function (e) { console.log(e); }, maxWidth: 360, minWidth: 300 });
//js添加一页并且跳转到第4页
k.add("标题", "内容").tab(3);
//删除页
//k.remove(0);

//小圆形按钮标题 每隔3秒自动滚动 myimg:自己写的css类,控制里面图片大小
$("#divs2").slider({ maxWidth: 300, className: "ks_wt_2 myimg", tick: 3000 });
});
</script>

html

<div id="divs1" class="kslider">
<ul class="ks_wt">
<li class="ks_t2">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div class="ks_dbox ks_ts">
<div class="ks_warp">
<ul>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
<li>text1</li>
</ul>
</div>
<div class="ks_warp">
<img src="img/img1.jpg" />
</div>
<div class="ks_warp">
<ul>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
<li>text3</li>
</ul>
</div>
</div>
</div>

具体代码

css

/*
kslider.css
lxk 2014.08.14
www.cnblogs.com/wingkun
*/


body{margin:0px;text-align:center;font:12px 微软雅黑;}

.kslider{width:100%;overflow:hidden;margin:0 auto;background:#f0f0f0;}

.kslider .ks_warp{width:100%;}
.kslider .ks_ts{-webkit-transition:500ms;}
.kslider .ks_dbox{width:100%;display:-webkit-box;text-align:left;}

.kslider .ks_wt{display:-webkit-box;margin:0px;padding:0px;-webkit-box-pack:center;}
.kslider .ks_wt li{text-align:center;list-style:none;background: -webkit-linear-gradient(top, #AAAAAA 0%,#979797 100%);color: #fff;}

.ks_wt_1 .ks_wt li{-webkit-box-flex:1;height:35px;line-height:35px;border-right:solid 1px #BBB;}
.ks_wt_2 .ks_wt li{background:-webkit-linear-gradient(top, #e7e7e7 0%,#dfdfdf 100%);text-indent: 20px;height:10px;width:10px;overflow:hidden; border-radius:100%;margin:5px;}

.ks_wt_1 .ks_wt .ks_t2{background:-webkit-linear-gradient(top, #e7e7e7 0%,#dfdfdf 100%); color:#000;}
.ks_wt_2 .ks_wt .ks_t2{background: -webkit-linear-gradient(top, #AAAAAA 0%,#979797 100%); -webkit-animation:kt2 500ms linear;}


@-webkit-keyframes kt2
{
0%{-webkit-transform:scale(1);}
100%{-webkit-transform:scale(1.5);}
}

js

/*
zepto.kslider.js
lxk 2014.08.14
www.cnblogs.com/wingkun
*/

(function ($) {
/*
参数:config

change:tab页变更事件
参数e: 当前页码
tick:自动滚动间隔时间毫秒 (不设置则不自动滚动)
maxWidth:容器最大宽度 (默认有100%)
minWidth:容器最小宽度 (默认有100%)
className:样式类名
"ks_wt_1" 标题栏-方形 (默认)
"ks_wt_2" 标题栏-小圆形
或者你自定义的类名

*/
$.fn.slider = function (config) {

config = $.extend({}, { className: "ks_wt_1" }, config);

var b = $(this), tw, timer,
target = b.find(".ks_dbox"),
title = b.find(".ks_wt"),
m = { initX: 0, initY: 0, startX: 0, endX: 0, startY: 0, canmove: false },
currentTab = 0;

b.toggleClass(config.className,true);
if (config.maxWidth) b.css({ maxWidth: config.maxWidth });
if (config.minWidth) b.css({ mixWidth: config.minWidth });

title.on("click", function (e) {
if (e.target == this) return;
toTab($(e.target).index());
});

b.on("touchstart", function (e) {
var et = e.touches[0];
if ($(et.target).closest(".ks_dbox").length != 0) {
m.canmove = true, m.initX = m.startX = et.pageX;
m.initY = et.pageY;
clearTimer();
}

}).on("touchmove", function (e) {

var et = e.touches[0];
if (m.canmove && Math.abs(et.pageY - m.initY) / Math.abs(et.pageX - m.initX) < 0.6) {
// if (m.canmove && Math.abs(et.pageX - m.startX) > 10) {
target.removeClass("ks_ts").css("-webkit-transform", "translate3d(" + (m.endX += et.pageX - m.startX) + "px,0,0)");
m.startX = et.pageX;
e.preventDefault();
}
}).on("touchend", function (e) {
if (!m.canmove) return;
target.toggleClass("ks_ts", true);

tw = target.width();
//是否超过了边界
var bl = false, current = Math.abs(m.endX / tw);

if (m.endX > 0) {
current = m.endX = 0;
bl = true;
}
else if (m.endX < -tw * (target.children().length - 1)) {
current = target.children().length - 1;
bl = true;
}

if (!bl) {
if (m.endX % tw != 0) {
//target.css("transform", "translate(" + (m.endX = -tw*Math.abs(Math.round(m.endX/tw))) + "px,0px)");
var str = parseInt((current + "").split(".")[1][0]);

if (e.changedTouches[0].pageX > m.initX) {
//往右
current = str <= 9 ? Math.floor(Math.abs(current)) : Math.abs(Math.round(m.endX / tw));
} else {
//往左
current = str >= 1 ? Math.floor(Math.abs(current)) + 1 : Math.abs(Math.round(m.endX / tw));
}
}
}
toTab(current);
setTimer();
m.canmove = false;
});

var move = function (i) {
target.css("-webkit-transform", "translate3d(" + (m.endX = i) + "px,0,0)");
}

var setIndex = function (i) {
return i < 0 ? 0 : i >= target.children().length ? target.children().length - 1 : i;
}

var toTab = function (i) {
i = setIndex(i), tw = target.width();
move(-tw * i), toTitle(i);
if (currentTab != i && config.change) {
config.change(i);
}
currentTab = i
}

var toTitle = function (i) {
if (title.length == 0) return;
title.children().toggleClass("ks_t2", false).eq(i).toggleClass("ks_t2", true);
}

var setTimer = function () {
if (!config.tick) return;
if (timer) clearTimer();
timer = setInterval(function () {
toTab(currentTab >= target.children().length - 1 ? 0 : currentTab + 1);
}, config.tick)
}

var clearTimer = function () {
clearInterval(timer);
timer = null;
}

setTimer();

return {
add: function (t, c) {
//添加tab
title.append("<li>" + t + "</li>");
target.append("<div class=\"ks_warp\">" + c + "</div>");
return this;
},
remove: function (i) {
//移除tab
if (title.children().length == 1) return;
i = setIndex(i);
title.children().eq(i).remove();
target.children().eq(i).remove();
if (i == currentTab) toTab(0);
return this;
}, tab: function (i) {
//设置或者获取当前tab
return i ? toTab(i) : currentTab;
}
}
}
})(Zepto);

其他

  • demo里面只引用了基础的zepto,其实移动端他的touch.js也是非常有必要的,引用了之后可以将代码内的click换成zepto的tap事件

  地址: https://github.com/madrobby/zepto/blob/master/src/touch.js#files

  • 容器用的box布局,内部html样式要注意一下
  • 只支持大部分webkit内核浏览器
  • 测试需要在移动设备上进行,电脑上需要chrome,F12打开,在控制台旁边,伪装环境,如下图:

 

  发布匆忙,如有纰漏麻烦大家指出哦,demo下载: 这里

 

本人工作之余,闲暇时间好多……顺便来寻求下兼职!

asp.net/js/jquery/html5/css3/移动前端 经验丰富

(坐标[长沙],行业[彩票业] -- 如果有需要)

求多多支持!


本文链接: [原创]zepto打造一款移动端划屏插件,转载请注明。

相关 [原创 zepto 移动] 推荐:

[原创]zepto打造一款移动端划屏插件 - wingkun

- - 博客园_首页
最近忙着将项目内的jquery 2换成zepto. 因为不想引用过多的zepto包,所以花了点时间. zepto真的精简了许多,源代码看着真舒服. 正好项目内需要一个划屏插件,就用zepto写了一个. 逻辑其实很简单,但没想到测试时,在老版本android设备浏览器上的touchmove有许多bug.

zepto的touch库安卓4.4滑动bug修复

- - Web前端 - ITeye博客
本文也是从网上摘录的,因为坑爹的zepto团队以没有安卓设备为由不予修复此问题,所以做个记录以免今后忘记了. 以下代码为zepto中部分代码,可查找后然后替换即可:. * 修复 android 4.4 swipe 事件. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

【CDC翻客 原创译文】为移动而设计,第一部分:信息架构

- - 腾讯CDC
     译者注:本文从设计人员的角度出发,提出了移动端设计与传统桌面端设计的不同之处,同时归纳总结并比较了多种主流的设计模式和信息架构,旨在帮助设计、产品、开发相关人员更好的思考移动端设计. 分享给大家,希望有所帮助和启发.   英文原文:  http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/.

移动花园

- apple - 设计|生活|发现新鲜
忙碌一天的上班族们,拖着疲惫的身体进入地铁. 倘若,引入眼帘的是此番美景,你是否会忘却这一天的烦恼和种种不顺. 芝加哥的艺术家将地铁的一节车厢装扮成绿意盎然的移动花园. 无论是天花板,座椅还是过道都被郁郁葱葱的绿色包裹着,并环绕城市绕行5小时. 多想长时间留在这节车厢中,想必每位走出来的乘客多多少少都会有些小失落吧.

ETL概述(原创)

- - ITeye博客
ETL,Extraction- Transformation-Loading的缩写,即数据抽取(Extract)、转换(Transform)、装载(Load)的过程,它是构建数 据仓库的重要环节. ETL是将业务系统的数据经过抽取、清洗转换之后加载到数据仓库的过程,目的是将企业中的分散、零乱、标准不统一的数据整合到一起,为 企业的决策提供分析依据.

移动互联网=移动+互联网?

- 可可 - It Talks-魏武挥的blog
从名词上看,移动互联网似乎就是互联网加上一个移动. 但移动互联网远不是“移动的互联网”那么简单. 它的本质——网络部分,就和互联网大不相同;而它的表现——移动部分,也正因为移动,造就了很多和互联网相当不一样的商业机会. 而更重要也是很多人并没有注意到的是,它可能会改变整整一代人的信息处理习惯. 从网络部分而言,我们都知道,理论上互联网是没有拥有者的.

移动的别墅

- Kidwind - 玩意儿
200万美元打造的超豪华房车,拥有两个楼层,30吨重,16米长,拥有100多平米的空间,内部超豪华的装修,各种家居应有尽有. 本文原始链接:http://www.cngadget.cn/ashton-kutchers.html. Kenchikukagu:移动的家具.

移动App别慌!

- - 《商业价值》杂志
工信部要传达的信息应该是对国内第三方应用商店进行备案,对个人应用开发者实行实名认证,并非被误读的针对每一款App进行备案. 2012年底,移动互联网领域有两件事情值得大家关注,一个是引发轩然大波的App备案. 另一个是近期逐渐显现的移动App同质化问题. 这两个问题都与我们所倡导的营造移动App绿色生态链相关.

关于移动4G

- - 膘叔
本来,我以为网上的笑话真心是笑话:晚上睡觉的时候忘关4G,结果早上起来房子属于中国移动了(是按40元300M流量,这个套餐3秒就能用完,3秒40元,一分钟800元,一个小时4万8,你算算24小时多少钱). 前两天在利用wifi更新APP的时候,因为上厕所所以wifi断了,结果就自动用4G下载了. 原本我还有100多M流量,可是小号的时候就拼命收到短信.

美国互联网趋势:移动!移动!移动!

- - 爱范儿 · Beats of Bits
Business Insider(BI)最近发布了一份报告,总共 100 多页幻灯片,内容无所不包. 如果你关注互联网行业的发展,那么这份报告不应该错过. 报告数据显示,目前全球上网的人口已经占据总人口的三分之一,总数量超过 20 亿. 也就是说,经过了二十多年的发展,互联网依然是一个超大型局域网,要覆盖全球大部分人口仍有一段时间.