<!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. Button 对 TreeView1 所有节点的全选

    protected void Button1_Click(object sender, EventArgs e)    {        for (int i = 0; i < this.Tre ...

  2. Java解析XML三种常用方法

    1.使用DOM方式解析: package com.wzh.dom; import java.util.Iterator; import javax.xml.parsers.DocumentBuilde ...

  3. 在SharePoint中无代码开发InfoPath应用: 一个测试Web Service的工具

    这是这个系列的第一篇,介绍一个小工具,主要是用在Web Service测试的. 因为为了用一点高级的东西,就免不了和web service打交道. 你可以使用按照KB819267来修改web.conf ...

  4. linux中fork（）函数详解（原创！！实例讲解） （转载）

     一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程, 也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不 ...

  5. 通过注册的URL Scheme向目标APP传递参数

    通过注册的URL Scheme向目标APP传递参数 通过URL Scheme启动APP很简单就可以做到,但有时候我们想在启动APP的时候传递一些参数,这个时候我们就可以通过URL Scheme自定义U ...

  6. 使用网站websequencediagrams在线画时序图

    在线画时序图的网站:https://www.websequencediagrams.com/ 该网站提供拖拉图形和编写脚本代码2个方式来制作时序图,同时提供多种显示风格. 实例: 1.脚本代码: ti ...

  7. JavaScript Patterns 2.11 Writing Comments

    Document all functions, their arguments and return values, and also any interesting or unusual algor ...

  8. 【Android】 Android实现录音、播音、录制视频功能

    智能手机操作系统IOS与Android平分天下(PS:WP与其他的直接无视了),而Android的免费招来了一大堆厂商分分向Android示好,故Android可能会有“较好”的前景. Android ...

  9. 学习调用WCF服务的各种方法

    1.开发工具调用WCF 这中方法很方便也很简单,很多工作VS就帮我们完成了.相信大家也不会对这种方法陌生.这里简单提一下.打开VS,在项目中添加服务引用: 在config中自动声明了有关服务的节点信息 ...

  10. 问题解决——VS2010 将生成的文件复制到指定位置

    我是从VC6直接过渡到VS2010的,VS2008没怎么用过.用VS2010的时候,每次生成dll后,手工把dll.lib..h文件复制到指定文件夹太麻烦了,所以着手写了这个. =========== ...