zepto打造一款移动端划屏插件

效果图

样式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);}
}

/*
    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);}
}

/*
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);

/*
    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内核浏览器

zepto打造一款移动端划屏插件的更多相关文章

[原创]zepto打造一款移动端划屏插件
最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服正好项目内需要一个划屏插件,就用zepto写了一个逻辑其 ...
【转载】jQuery手机移动端触屏日历日期选择
文章转载自科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
基于zepto的移动端轻量级日期插件
前言做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...
使用Python打造一款间谍程序
知识点这次我们使用python来打造一款间谍程序程序中会用到许多知识点,大致分为四块 win32API 此处可以在MSDN上查看 Python基础重点在cpytes库的使用,使用方法请点击此处 ...
移动端触屏click点击事件延迟问题，以及tap的解决方案
在移动端触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
打造一款刷Java 知识的小程序（二）
学习Java的神器已上线,面向广大Java爱好者! 之前写的一篇:打造一款刷Java 知识的小程序(一) 一.第二版做了什么? 第一版小程序只具有初级展示功能,知识点都是hardcode在代码里面的 ...
【FastDFS】如何打造一款高可用的分布式文件系统？这次我明白了！！
写在前面前面我们学习了如何基于两台服务器搭建FastDFS环境,而往往在生产环境中,需要FastDFS做到高可用,那如何基于FastDFS打造一款高可用的分布式文件系统呢?别急,今天,我们就一起来基 ...
【ASP.NET程序员福利】打造一款人见人爱的ORM（一）
“很多人都不太认可以第三方ORM,因为考虑的点不够全面,没有大用户群体的ORM有保证,这点是不可否认确是事实.但是往往用户群体大的ORM又有不足之处,今天我们就来聊聊关于ORM的话题,打造 ...
【ASP.NET程序员福利】打造一款人见人爱的ORM（二）
上一篇我已经给大家介绍AntORM的框架[ASP.NET程序员福利]打造一款人见人爱的ORM(一),今天就来着重介绍一下如何使用这套框架 1>AntORM 所有成员如果你只想操作一种数据库,可 ...

随机推荐

logstash Codec
Logstash 使用一个名叫FileWatch的Ruby Gem库来监听文件变化,这个库支持glob扩展文件路径, 而且会记录一个叫.sincedb的数据库文件来跟踪被监听日志文件的当前读取位置,所 ...
4.1. 如何在Windows环境下开发Python
4.1. 如何在Windows环境下开发Python 4.1. 如何在Windows环境下开发Python 4.1.1. Python的最原始的开发方式是什么样的 4.1.1.1. 找个文本编辑器,新 ...
管理SQL Server数据库服务器的安全防范原则
在现实的世界中,我们不可能为每一个可能的威胁做好准备,我们只能增强自身的防护,让恶意用户更难威胁到我们的安全.SQL Server也一样,我们必须遵循一些基本的原则来保证和提高服务器的安全级别,让恶意 ...
java 命令行制定logback参数
-Dlogback.configurationFile=file:///export/Workspace/apache-cassandra/apache-cassandra-main/target/b ...
什么是 CSS 预处理器？
什么是 CSS 预处理器? 就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是 ...
Http权威指南笔记(一) URI URL URN 关系
定义 URI:统一资源标识符(Uniform Resource Indentifier)用来标识服务器上的资源. URL:统一资源定位符(Uniform Resouce Locator)是资源标识符最 ...
SpringMVC中采用简洁的配置实现文件上传
文件上传我们一般会有两种策略,一种是通过IO流上传,还有一种是通过表单上传,其实这两种在客户端实现起来都是很简单的,在服务端处理会略有差别,个人感觉IO上传代码简单,但是也有很多硬伤,还是表单上传更合 ...
总结PHP中几种常用的网页跳转代码
网页跳转的意思就是指当你在浏览器中访问A页面时,会自动跳转到B页面,往往网页跳转用在404页面中会比较多点.至于怎么实现网页跳转,网上已经提供了很多的方法,有些方法是不可行的,经过测试,叶德华今天就在 ...
c#中的数据类型简介
一.C#中的变量和常量 C#中用于定义常量的方式有两种一个使用const关键字,一个是用readonly关键字.使用const定义的常量叫静态常量(compile-time constant),用re ...
HDU 2473 - Junk-Mail Filter ，并查集的删点
Problem Description Recognizing junk mails is a tough task. The method used here consists of two ste ...

zepto打造一款移动端划屏插件

zepto打造一款移动端划屏插件的更多相关文章

随机推荐

热门专题