基于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. Android项目打包开启proguard的混淆优化带来的问题

    1.引入一个sdk以后.打包报错: [INFO] Unexpected error while evaluating instruction: [INFO]   Class       = [com/ ...

  2. mysql binlog参数设置

    1.mysql有许多系统变量,可以设置,系统变量设置不同,不同的系统将导致执行状态. 故mysql提供两组命令,分别查看系统设置和执行状态. 1.系统设置: SHOW [GLOBAL | SESSIO ...

  3. 用JSmooth制作java jar文件的可运行exe文件教程【图文】

    这是我之前在个人博客3yj上面写的一篇文章,如今转载过来,原文地址 (这不是广告哦) 几年前,刚接触java的是,就想用一些方法把自己的劳动果实保护起来,曾经也用过非常多这种工具,有一个特别好用,今天 ...

  4. Oracle SQL函数之转换函数

    chartorowid(c1) [功能]转换varchar2类型为rowid值 [参数]c1,字符串,长度为18的字符串,字符串必须符合rowid格式 [返回]返回rowid值 [示例] SQL> ...

  5. web前端技术归类

    1.以屏幕可用宽和高的百分比来定义弹出框的宽和高 var trueWidth = $(top.window).width() * 0.9;var trueHeight = $(top.window). ...

  6. C++程序设计实践指导1.4正整数转换为字符串改写要求实现

    改写要求1:改为适合处理超长整数 #include <cstdlib> #include <iostream> #include <string> using na ...

  7. 在Struts2中使用poi进行excel操作下载的时候报getOutputStream() has already been called for this response 错误 [转]

    在项目中用到了poi这个开源的操作excel文件的jar. 项目中用到struts2容器管理servlet.不是单纯的直接用servlet.         workbook.write(os);   ...

  8. Android Studio默认产生Fragment

    package com.edaixi.fragment; import android.content.Context;import android.net.Uri;import android.os ...

  9. ie8下的透明 问题

    团队里经常遇到,索性整理一起 是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明和整体透明 先说下背景色透明,背景色透明,在现代浏览器中,可以用rgba颜色作为背景色. 简单介绍下r ...

  10. java 使用pem密钥进行RSA加解密

    1.使用openssl生成私钥和公钥 openssl下载地址:http://www.openssl.org/source openssl生成私钥命令:  genrsa -out rsa_private ...