基于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. crm操作知识库文章实体

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Crm.Sdk.Messages;     using Microsoft ...

  2. Android应用程序请求SurfaceFlinger服务创建Surface的过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/7884628 前面我们已经学习过Android应 ...

  3. ThreadPoolExecutor详解

    线程池类为 java.util.concurrent.ThreadPoolExecutor,常用构造方法为: ThreadPoolExecutor(int corePoolSize, int maxi ...

  4. [记录]关于vertical-align单/多选框与说明文字对齐效果

    效果图:    第一张使用label标签,第二张没有使用.. 使用label标签,middle对齐方式的单选框下降了1px 而没有使用label标签,sub对齐方式的 却 居 中 了 =_= 不太理解 ...

  5. Android测试框架2（非原创）

    package com.example.sqlitedatabase.test; import android.content.ContentValues;import android.databas ...

  6. 查看并设置oracle并发连接数

    1.Sql代码1.select count(*) from v$process  select count(*) from v$process --当前的数据库连接数2.Sql代码1.select v ...

  7. IT运维外包甩不掉的包袱

    对一个企业的IT信息部门来说,保证IT系统的安全.稳定和可靠运行是IT部门义不容辞的职责,但IT系统的安全.稳定和可靠是相对的,得看企业IT投入和ROI.现在企业的IT系统运维面临着多重压力:一方面是 ...

  8. NSString 字符串操作

    //一.NSString /*----------------创建字符串的方法----------------*/ //1.创建常量字符串. NSString *astring = @"Th ...

  9. IOS开发系列 --- 核心动画

    原始地址:http://www.cnblogs.com/kenshincui/p/3972100.html 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥i ...

  10. 【Android类型SDK测试（二）】环境基础

    (一)语言 Android使用的Java语言,所以要测试Android类型的SDK,Java的基础知识还是需要的. 另外,Android中有NDK类型的编程,需要知道C相关的知识. (二)环境准备 A ...