<!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. 如何解决div层被flash遮盖的问题

    页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决.不过对于Flash视频 ...

  2. 破解入门【OllyDebug爆破程序】

    逆向破解这块我也是个刚起步的小菜,入门都还算不上吧,看了点基础教程,先动手练习一下增加点兴趣.嘿嘿 工具: peid         //查壳工具 OllyDebug    //反汇编.动态调试工具 ...

  3. 转：EClipse 10个最有用的快捷键

    Eclipse快捷键 10个最有用的快捷键 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代 ...

  4. HDFS简单入门

    本文地址:http://www.cnblogs.com/archimedes/p/hadoop-simple.html,转载请注明源地址. 欢迎关注我的个人博客:www.wuyudong.com, 更 ...

  5. JAVA-插入排序

    插入排序 package com.pb.string.demo1; /** * 插入排序 * @author Denny * */ public class Demo { public static ...

  6. 多线程基础（二）pthread的了解

    IOS中多线程的实现方案   了解NSOperation(代码) 所有的方法都是pthread开头的   然后再搞一条线程 pthread_create方法有返回值,作用:判断线程创建是否成功?   ...

  7. iOS开发中的一些定时器

    在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?经过查阅资 ...

  8. 敏捷软件开发：原则、模式与实践——第8章　SRP：单一职责原则

    第8章 SRP:单一职责原则 一个类应该只有一个发生变化的原因. 8.1 定义职责 在SRP中我们把职责定义为变化的原因.如果你想到多于一个的动机去改变一个类,那么这个类就具有多于一个的职责.同时,我 ...

  9. 采用 PAT工具及CSP语言，对一个问题进行自动机 建模

    pat是新加坡国立开发的工具,需要的去官网下http://www.comp.nus.edu.sg/~pat/ ,学了一天,是个不错的自动机验证工具,感觉还不错啊. 验证一个数是否为斐波那契数且为质数 ...

  10. 数据仓库建模与ETL实践技巧

    数据分析系统的总体架构分为四个部分 —— 源系统.数据仓库.多维数据库.客户端(图一:pic1.bmp) 其中,数据仓库(DW)起到了数据大集中的作用.通过数据抽取,把数据从源系统源源不断地抽取出来, ...