<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

     *{padding:;margin:;list-style:none;}

     #box{width:600px; height:400px; border:1px solid #; margin:50px auto; position:relative;}

     #iph{width:200px; height:200px; border:1px solid #ccc; position:absolute; top:%; left:370px; margin-top:-100px; overflow:hidden;}

     #wrap{position:absolute;top:;left:; width:800px; height:200px;}

     #wrap li{float:left; width:200px; height:200px;}

 </style>

 <script src="move.js"></script>

 <script>

 window.onload=function(){

     var oW=document.getElementById('wrap');

     var oBox=document.getElementById('box');

     var aLi=oW.children;

     var count=;

     oW.onmousedown=function(ev){

         clearInterval(oW.timer);

         var oEvent=ev||event;

         var start=oEvent.clientX;

         var disX=oEvent.clientX-oW.offsetLeft;

         document.onmousemove=function(ev){

             var oEvent=ev||event;

             var l=oEvent.clientX-disX;

             oW.style.left=l+'px';

         };

         document.onmouseup=function(ev){

             var oEvent=ev || event;

             var end=oEvent.clientX;

             if(end-start>){

                 count--;

                 if(count==-){

                     count=;

                 }

                 move(oW,{left:-aLi[].offsetWidth*count});

             }else if(end-start<-){

                 count++;

                 if(count==aLi.length){

                     count=aLi.length-;

                 }

                 move(oW,{left:-aLi[].offsetWidth*count});

             }else{

                 move(oW,{left:-aLi[].offsetWidth*count});

             }

             document.onmousemove=null;

             document.onmouseup=null;

         };

         return false;

     };

 };

 </script>

 </head>

 <body>

 <div id="box">

     <div id="iph">

         <ul id="wrap">

             <li style="background:red;"></li>

             <li style="background:yellow;"></li>

             <li style="background:blue;"></li>

             <li style="background:green;"></li>

         </ul>

     </div>

 </div>

 </body>

 </html>

js模拟手机触摸屏的更多相关文章

  1. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

  2. 在PC上测试移动端网站和模拟手机浏览器的5大方

    查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...

  3. 在PC上测试移动端网站和模拟手机浏览器的5大方法

    在PC上测试移动端网站和模拟手机浏览器的5大方法 来源:互联网 作者:佚名 时间:03-19 10:14:54 [大 中 小]                最近公司要开发网站的移动版,让我准备准备知 ...

  4. 【转】在PC上测试移动端网站和模拟手机浏览器的5大方法

    查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...

  5. PC上测试移动端网站和模拟手机浏览器

    一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面 ...

  6. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  7. js判断手机 横屏模式

    js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...

  8. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  9. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

随机推荐

  1. iscroll性能

    iscroll是比较耗性能的,在iPhone和性能比较好的机是比较流畅的,在性能低的手机就会出现卡的情况.所以如果不想出现这种情况,只有不使用iscroll,囧.

  2. c# Json Dictionary序列化和反序列化

    说明:Dictionary对象本身不支持序列化和反序列化,需要定义一个继承自Dictionary, IXmlSerializable类的自定义类来实现该功能.感觉完全可以把这样的类封装到C#库中,很具 ...

  3. redis实现主从复制-单机测试

    一.redis实现主从复制-单机测试1.安装redis tar -zxvf redis-2.8.4.tar.gzcd redis-2.8.4make && make install2. ...

  4. Android 计算布局背景的透明度

    1.#ff000000 此为16进制颜色代码,前2位ff为透明度,后6位为颜色值(000000为黑色,ffffff为白色,可以用ps等软件获取). 2.透明度分为256阶(0-255),计算机上用16 ...

  5. IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog输出,NSLog两种不同情况的输出方式

    [新年新气象,2016/01/04] 俺们在开发IOS程序过程中,经常需要用到NSLog输出一些信息,甚至有的开发过程,必须在控制台查看输出,有经验的程序员通过控制台输出就能知道整个数据交互的一个流程 ...

  6. WKWebView API精讲(OC)

    WKWebView API精讲(OC) 前言 鉴于LL同志对笔者说:“能不能写个OC版本的WKWebView的使用教程?”,还积极打赏了30RMB,笔者又怎么好意思拒绝呢,于是才有了下文. 所有看到本 ...

  7. Spring(十)Spring任务调度

    一.计划任务 需要定时执行一些计划(定时更新等),这样的计划称之为计划任务 Spring抽象封装了Java提供的Timer与TimerTask类 也可以使用拥有更多任务计划功能的Quartz 二.Ti ...

  8. NSTimer定时器的使用

    前言:这是关于NSTimer的学习笔记. 正文内容大纲: 1.关于计时器NSTimer的一个被添加进NSRunLoop的使用细节 2.关于NSTimer常用方法的使用 3.关于NSTimer的类别工具 ...

  9. 每日Scrum--No.5

    Yesterday:学习并编写代码 Today:组织小组开一次阶段性的总结会议:讨论需求分析中存在的问题:继续学习和编写代码:总结前阶段代码出现的问题 Problem:编程要注意很多的特殊情况,程序成 ...

  10. mmap 与 read/write

    mmap与read/write两条路线对文件的访问比较 我们知道无论是通过mmap或read/write访问文件在内核中都必须经过缓存, 当需要从文件读写内容时,都经过内存拷贝的方式与内核中的缓存进行 ...