基于zepto的手机焦点图，查看地址：demo （建议使用手机浏览器查看）代码如下：

<!DOCTYPE HTML>

<html>

<head>

<title>zepto实现手机网站焦点图触屏划动效果</title>

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>

<script src="" type="text/javascript" charset="utf-8"></script>

<style>

*{margin:0; padding:0;}

.focus{width:300px; overflow:hidden;}

.focus .con{width:1500px;overflow:hidden;}

.focus .con li{font-style:normal;width:300px;height:200px;background:#ccc;text-align:center;float:left;}

.focus .tit li{width:20%;float:left;}

.focus .tit li.on{background:#ccc;}

</style>

</head>

<body>

<div class="focus">

<ul class="con">

<li>1111</li>

<li>2222</li>

<li>3333</li>

<li>4444</li>

<li>5555</li>

</ul>

<ul class="tit">

<li class="on">1111</li>

<li>2222</li>

<li>3333</li>

<li>4444</li>

<li>5555</li>

</ul>

</div>

<script>

var touch={};

touch.current=0;

touch.lenght=4;

var touchElem=$(".focus ul")[0];

function move(elem,targetW,current){

elem.animate({

translate3d: targetW *current + "px,0,0"

},300,'steps',function(){

});

}

function moveli(current){

//alert(elem.find("li"));

$(".tit > li").each(function(){

$(this).removeClass("on");

})

$(".tit > li").eq(current).addClass("on");

}

$(touchElem).unbind().bind("touchstart",function( e ){

touch.x1 = e.touches[0].pageX;

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

touch.x2 = e.touches[0].pageX;

touch.x3 = touch.endx+(touch.x2-touch.x1);

document.title=touch.x2-touch.x1;

$(this).css("-webkit-transform","translate3d("+touch.x3+"px, 0px, 0px)");

e.preventDefault();

}).bind("touchend",function( e ){

if(Math.abs(touch.x2 - touch.x1) >=30){

touch.i = touch.x2 - touch.x1 > 0 ? -1 : 1;

touch.current=touch.current+touch.i;

if(touch.current==-1){touch.current=0}else if (touch.current>=touch.lenght){touch.current=touch.lenght;}

}

document.title=touch.current;

touch.endx=touch.current*-300;

move($(this),-300,touch.current);

moveli(touch.current);

}).bind('touchcancel', function(){

})

</script>

</body>

</html>

基于zepto的手机焦点图touchstart touchmove的更多相关文章

  1. iscroll4 捕捉元素开发手机焦点图滑动效果

    html标准代码格式 <div id="wrapper"> <div id="scroller" > <ul id="t ...

  2. 基于Zepto移动端下拉加载（刷新），上拉加载插件开发

    写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

  3. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  4. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  5. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  6. 基于zepto判断mobile的横竖屏状态

    借用jquery mobile中的代码,删除了一些多余的部分,简单的基于zepto的模块 var CheckOrientation = (function(){ var win = $( window ...

  7. 基于mAppWidget实现手绘地图(十五)–如何控制放大缩小

    一般来说,可以使用以下几种方式来控制地图的放大/缩小 : 使用控件底部的缩放按钮 双击控件 pinch手势 物理按键 :I键标识缩小 :O键表示放大.(只有设备具有物理按键才行)        当然, ...

  8. 基于mAppWidget实现手绘地图--索引&DEMO

    文章翻译完了,梳理一下,附Demo下载 基于mAppWidget实现手绘地图(一)–简介 基于mAppWidget实现手绘地图(二)–概要 基于mAppWidget实现手绘地图(三)–环境搭建 基于m ...

  9. 基于zepto的移动端日期和时间选择控件

    前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...

随机推荐

  1. TRIZ系列-创新原理-32-改变颜色原理

    改变颜色原理的详细描写叙述例如以下:1)改变物体或其环境的颜色:2)改变物体或其环境的透明度:3)对于难以看到的物体或过程.使用颜色加入剂来观測.4)假设已经使用了这样的加入剂,那么使用发光跟踪或原子 ...

  2. Python标准库：内置函数classmethod(function)

    把类函数当作类的一个方法返回. 类方法第一个參数是指明类,跟类中函数一样,第一个參数是指明类实例. 类方法修饰符採用以下的格式来使用: class C: @classmethod def f(cls, ...

  3. error: ‘for’ loop initial declarations are only allowed in

    使用gcc,出现如下错误: thread_join.c:7:5: error: 'for' loop initial declarations are only allowed in C99 mode ...

  4. a:hover span 隐藏/显示 问题

    :hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单.相册效果等等. 或许用了这么久的伪类:hover,还有部分朋友还不完全了解ho ...

  5. java学习——函数

    class FunctionDemo { public static void main(String[] args) { System.out.println("Hello World!& ...

  6. 实现一个宽和高都是100像素的div可以用鼠标拖拽移动的效果

    html,body{ width:100%;height:100%;margin:0px;padding:0px; } #box{ width:100px;height:100px;backgroun ...

  7. G - 密码 kmp、贪心、manachar等等等等

    G - 密码 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:%lld & %llu Submit Status ...

  8. ajax数据显示，使用js通用模板

    最近用ajax获取数据,上级要求要自己写一个js模板,以往看到的js模板,大都数都是在js里面拼接的,现在换一种比较简单的写法, 通过ajax获取数据源,js模板循环显示数据 function Get ...

  9. Java数组的复制

    初学Java的时候,需要复制数组的时候,一下子就想到使用赋值语句“=”,例如:array1 = array2:但后来慢慢发现,这个语句并不能将array2的内容复制给array1,而是将array2的 ...

  10. CS0016: 未能写入输出文件*****目录名称无效

    一大早,杀毒软件弹出删除隐私记录.清理空间一堆堆的提醒,一般我都是无视它,今天顺便点了下清理,然后出问题. 昨晚下班提交的代码,程序运行好好地,今早清理完系统,竟然就出问题了, 具体如下 CS0016 ...