基于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. Keepalived+Lvs+Mysql主主复制

    一简单介绍 Keepalived+lvs+mysql主主复制是比較经常使用的一种Mysql高可用方案,当中lvs 提供读负载均衡,Keepalived通过虚拟vip漂移实现故障自己主动转移,而Mysq ...

  2. wso2esb源码编译总结

    最近花了两周的空闲时间帮朋友把wso2esb的4.0.3.4.6.0.4.7.0三个版本从源码编译出来了.以下是大概的一些体会. wso2esb是基于carbon的.carbon是个基于eclipse ...

  3. 淘宝弹性布局方案lib-flexible研究

    1. lib-flexible不能与响应式布局兼容 先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈 ...

  4. Reflux 使用教程

    Reflux是根据React的flux创建的单向数据流类库.Reflux的单向数据流模式主要由actions和stores组成.例如,当组件list新增item时,会调用actions的某个方法(如a ...

  5. C# 调用存储过程传入表变量作为参数

    首先在SQLServer定义一个自定义表类型: USE [ABC] GO CREATE TYPE [ABC].[MyCustomType] AS TABLE( ) NOT NULL, ) NULL, ...

  6. Emmet 语法探析

    Emmet 语法探析 Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具. 大多数编辑器都支持Snippet,即存储和重用一些代码块.但是前提是:你必须先定义 这些代码块. E ...

  7. BestCoder 2nd Anniversary 1001 Oracle

    找到最小的非零数字拆开来相加. 高精度. #include <iostream> #include <cstdio> #include <cstring> #inc ...

  8. 使用NODEJS+REDIS开发一个消息队列以及定时任务处理

    作者:RobanLee 原创文章,转载请注明: 萝卜李 http://www.robanlee.com 源码在这里: https://github.com/robanlee123/RobCron 时间 ...

  9. 屏蔽鼠标右键功能JS

    <script language="Javascript">     function hiderightKey(){    return false; } docum ...

  10. [ofbiz]screen中应用form和ftl，控制页面元素属性

    可以在screen中定义form与ftl两个文件,ftl中可以使用js控制form中的页面元素属性. 控制元素是否可编辑:        $("#oaDataReport_budget&qu ...