<!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. SQLServer处理行转列和列转行

    掌握SQL Server 行转列和列转行 1.列转行 数据经过计算加工后会直接生成前端图表需要的数据源,但是程序里又需要把该数据经过列转行写入中间表中,下次再查询该数据时直接从中间表查询数据. 1.1 ...

  2. javascript宿主对象之window.frames

    window.frames属性是当前页面所有框架的集合.要注意的事,这里并没有frame和iframe做出区分.而且,无论页面存不存在框架,window.frames属性总是存在的,并总是指向wind ...

  3. 【读书笔记】iOS网络-运行循环

    运行循环是由类NSRunLoop表示的,有些线程可以让操作系统唤醒睡眠的线程以管理到来的事件,而运行循环则是这些线程的基本组件.运行循环是这样一种循环,可以在一个周期内调度任务并处理到来的事件.iOS ...

  4. 【读书笔记】iOS-忽略编译警告

    一,忽略编译警告的命令. -w   禁止掉所有的编译警告. -Wno-unused-variable  只禁止掉未使用的变量的编译警告. 二,忽略编译警告的方法. targets--->Buil ...

  5. C语言-07-预处理、typedef、static和extern

    预处理 1> 使用注意 以#开头 在代码被翻译成0和1之前执行 预处理指令可以出现在任何位置 作用域是从编写指令那一行开始到文件结束 2> 宏定义 基本使用 ① 使用#define定义 ② ...

  6. IOS之UI--自定义按钮实现代理监听点击事件

    前言: Objective-C提供的按钮监听事件的方法是 不含参数的监听方法 [button实例对象 addTarget:self action:@selector(func) forControlE ...

  7. 手动设定实例变量的KVO实现监听

    手动设定实例变量的KVO实现监听 如果将一个对象设定成属性,这个属性是自动支持KVO的,如果这个对象是一个实例变量,那么,这个KVO是需要我们自己来实现的. 以下给出源码供君测试: Student.h ...

  8. 敏捷开发中高质量 Java 代码开发实践

    Java 项目开发过程中,由于开发人员的经验.代码风格各不相同,以及缺乏统一的标准和管理流程,往往导致整个项目的代码质量较差,难于维护,需要较大的测试投入 和周期等问题. 这些问题在一个项目组初建.需 ...

  9. ThinkPHP 获取get post参数与I方法

    传统方式获取变量 $id = $_GET['id']; // 获取get变量 $name = $_POST['name']; // 获取post变量 $value = $_SESSION['var'] ...

  10. 烂泥：KVM虚拟机随KVM服务器的启动而启动

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 要使KVM虚拟机随KVM服务器的启动而启动,我们所需要做的工作很少.只需要把KVM虚拟机的XML配置文件做一个软连接到/etc/libvirt/qemu ...