用简单的思路写了下pc端模拟web端的图片滑动效果。。。

效果卡，bug多，完毕，继续学习c3方法写这个，iscroll就是可以模拟这种效果，还在学习中，难点《触点判断》

代码一份

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Demo</title>
  6.     <link rel="stylesheet" href="idangerous.swiper.css">
  7.     <style>body {
  8.         margin: 0;
  9.         font-family: Arial, Helvetica, sans-serif;
  10.         font-size: 13px;
  11.         line-height: 1.5;
  12.     }
  13.  
  14.     .device {
  15.         width: 640px;
  16.         height: 300px;
  17.         padding: 30px 40px;
  18.         border-radius: 20px;
  19.         background: #111;
  20.         border: 3px solid white;
  21.         margin: 5px auto;
  22.         position: relative;
  23.         box-shadow: 0px 0px 5px #000;
  24.     }
  25.  
  26.     .device .arrow-left {
  27.         background: url(img/arrows.png) no-repeat left top;
  28.         position: absolute;
  29.         left: 10px;
  30.         top: 50%;
  31.         margin-top: -15px;
  32.         width: 17px;
  33.         height: 30px;
  34.     }
  35.  
  36.     .device .arrow-right {
  37.         background: url(img/arrows.png) no-repeat left bottom;
  38.         position: absolute;
  39.         right: 10px;
  40.         top: 50%;
  41.         margin-top: -15px;
  42.         width: 17px;
  43.         height: 30px;
  44.     }
  45.  
  46.     .swiper-container {
  47.         height: 300px;
  48.         width: 640px;
  49.     }
  50.  
  51.     .content-slide {
  52.         padding: 20px;
  53.         color: #fff;
  54.     }
  55.  
  56.     .title {
  57.         font-size: 25px;
  58.         margin-bottom: 10px;
  59.     }
  60.  
  61.     .pagination {
  62.         position: absolute;
  63.         left: 0;
  64.         text-align: center;
  65.         bottom: 5px;
  66.         width: 100%;
  67.     }
  68.  
  69.     .swiper-pagination-switch {
  70.         display: inline-block;
  71.         width: 10px;
  72.         height: 10px;
  73.         border-radius: 10px;
  74.         background: #999;
  75.         box-shadow: 0px 1px 2px #555 inset;
  76.         margin: 0 3px;
  77.         cursor: pointer;
  78.     }
  79.  
  80.     .swiper-active-switch {
  81.         background: #fff;
  82.     }
  83.  
  84.     .swiper-wrapper{
  85.         position: absolute;
  86.         top: 0;
  87.         left: 0;
  88.         width: 1920px;
  89.         height: 305px;
  90.         z-index: 0;
  91.     }
  92.     .swiper-slide{
  93.         float: left;
  94.  
  95.     }
  96.     .swiper-slide img{
  97.         -webkit-uers-select:none;
  98.         -webkit-user-drag: none;
  99.     }
  100.     </style>
  101. </head>
  102. <body>
  103. <div class="device">
  104.     <div class="swiper-container">
  105.         <div class="swiper-wrapper">
  106.             <div class="swiper-slide now"> <img src="slider1-1.png"> </div>
  107.             <div class="swiper-slide"> <img src="slider1-2.png"> </div>
  108.             <div class="swiper-slide">
  109.                 <div class="content-slide">
  110.                     <p class="title">Slide with HTML</p>
  111.                     <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
  112.                 </div>
  113.             </div>
  114.         </div>
  115.     </div>
  116.     <div class="pagination"></div>
  117. </div>
  118. <script src="jquery-1.10.2.js"></script>
  119. <script src="idangerous.swiper.js"></script>
  120. <script>
  121.         var drop = false;
  122.         var $wrap = $('.swiper-wrapper');
  123.         var $slide = $('.swiper-slide');
  124.         var x = 363 , y = 38, X = 0,moveX = 0, D,tergetTouchIndex,beuffer;
  125.         var arrPos = [],mx = 0;
  126.         $slide.mousedown(function(e){
  127.             var $this = $(this);
  128.           //  $this.removeClass('now').addClass('now');
  129.             tergetTouchIndex = $this.index() + 1;
  130.             drop = true;
  131.             console.log('index:' + tergetTouchIndex);
  132.             $wrap.css({"cursor":"move"});
  133.         });
  134.  
  135.         $slide.on('mousemove',function(e){
  136.             if(drop){
  137.                 moveX = e.pageX;
  138.                 //console.log('弹起坐标：-》鼠标的X坐标：' + e.pageX+'   鼠标的Y坐标：' + e.pageY);
  139.                 var x = e.clientX, y = e.clientY;
  140.                 //判断鼠标运行方向
  141.                 var  direction = '';
  142.                 if (arrPos.length > 0) {
  143.                     if (x > arrPos[0][0]) {
  144.                         if (y == arrPos[0][1]) direction = '右';
  145.                         else {
  146.                             if (y > arrPos[0][1]) direction = '右下';
  147.                             else direction = '右上';
  148.                         }
  149.                     }
  150.                     else {
  151.                         if (x == arrPos[0][0]) {
  152.                             if (y < arrPos[0][1]) direction = '上';
  153.                             else {
  154.                                 if (y > arrPos[0][1]) direction = '下';
  155.                             }
  156.                         }
  157.                         else {
  158.                             if (y == arrPos[0][1]) direction = '左';
  159.                             else {
  160.                                 if (y > arrPos[0][1]) direction = '左上';
  161.                                 else direction = '左下';
  162.                             }
  163.                         }
  164.                     }
  165.                 }
  166.  
  167.                 if (arrPos.length < 1) arrPos.push(Array(x,y));
  168.                 else {
  169.                     arrPos[0][0] = x;
  170.                     arrPos[0][1] = y;
  171.                     //console.log(direction);
  172.                     if (direction == '左' || direction == '左上' || direction == '左下') {
  173.                         mx = getLeft();
  174.                         mx = mx - 2.5;
  175.                         $wrap.css({"left": mx + "px"});
  176.                         D = 'left';
  177.                     } else if (direction == '右' || direction == '右上' || direction == '右下') {
  178.                         mx = getLeft();
  179.                         mx = mx + 2.5;
  180.                         $wrap.css({"left": mx + "px"});
  181.                         D = 'right';
  182.                     }
  183.                 }
  184.             }
  185.  
  186.             return false;
  187.         });
  188.  
  189.         $slide.mouseup(function(e){
  190.             drop = false;
  191. //            console.log('弹起坐标：-》鼠标的X坐标：' + e.pageX+'   鼠标的Y坐标：' + e.pageY);
  192.             getWrapXY();
  193.             if (D == 'left') {
  194.                 if (tergetTouchIndex != 3) {
  195.                     beuffer = 640 * tergetTouchIndex;
  196.                     toMove(-beuffer);
  197.                 } else {
  198.                     tergetTouchIndex--;
  199.                     beuffer = 640 * tergetTouchIndex;
  200.                     toMove(-beuffer);
  201.                 }
  202.  
  203.             } else if (D == 'right') {
  204.                 if (tergetTouchIndex != 1) {
  205.                     if(tergetTouchIndex == 3){
  206.                         tergetTouchIndex = tergetTouchIndex - 2  ;
  207.                         beuffer = 640 * tergetTouchIndex;
  208.                         toMove(-beuffer);
  209.                     }else{
  210.                         tergetTouchIndex = tergetTouchIndex - 2  ;
  211.                         beuffer = 640 * tergetTouchIndex;
  212.                         toMove(beuffer);
  213.                     }
  214.  
  215.                 } else if(tergetTouchIndex == 1){
  216.                     toMove(0)
  217.                 }
  218.  
  219.             }
  220.             $wrap.css({"cursor":"Default"});
  221.         });
  222.  
  223.         /*
  224.         * 取框架的左顶点坐标
  225.         * */
  226.  
  227.         function getWrapXY(){
  228.             var $w = $(".swiper-container").offset();
  229.             console.log('X:' + $w.left +'   Y:' + $w.top);
  230.         }
  231.  
  232.         /*
  233.         * 算出鼠标在容器中的实际xy坐标
  234.         * */
  235.         function getInBoxXY(x,y){
  236.  
  237.         }
  238.  
  239.         /*
  240.         * 移动前，外框的left值
  241.         *
  242.         * */
  243.         function getLeft(){
  244.             return parseInt($wrap.css('left'),10);
  245.         }
  246.  
  247.         function getch(index){
  248.             return $wrap.children().eq(index);
  249.         }
  250.  
  251.         /*
  252.         * 滑动动画
  253.         * */
  254.         function toMove(px){
  255.             $wrap.animate({"left":px+'px'});
  256.         }
  257. </script>
  258. </body>
  259. </html>

在pc游览器端模拟移动端幻灯片的更多相关文章

  1. PC端模拟移动端访问 字体大小限制

    审查元素(F12),调整为移动端,如下图所示: 在字体大小小于12px时,font-size就不起作用了. 在真实移动端设备上是起作用的.

  2. js判断游览器是移动端还是PC端

    js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...

  3. 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）

    最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...

  4. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  5. 基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

  6. PC端、移动端的页面适配及兼容处理

    转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...

  7. 利用在线HTTP接口测试工具ApiPost，模拟移动端请求API接口

    我们做开发一般都是在PC端,然而我们很多时候需要模拟移动端进行接口请求. 比如,当一个API需要根据用户不同的终端来返回不同的数据时,就需要一个工具来模拟不同的终端了. 利用接口测试工具ApiPost ...

  8. 【JMeter4.0学习（三）】之SoapUI创建WebService接口模拟服务端以及JMeter对SOAP协议性能测试脚本开发

    目录: 创建WebService接口模拟服务端 下载SoapUI 新建MathUtil.wsdl文件 创建一个SOAP项目 接口模拟服务端配置以及启动 JMeter对SOAP协议性能测试脚本开发 [阐 ...

  9. [转]基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

随机推荐

  1. js除法四舍五入保留小数点后两位写法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. CSS模版收集

    Css Reset by Eric MeyerURL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-develo ...

  3. poj1679 次小生成树

    prim方法:先求过一遍prim,同时标记使用过得边.然后同时记录任意2点间的最大值. 每次加入一条新的边,会产生环,删去环中的最大值即可. #include<stdio.h> #incl ...

  4. Java基础-被final修饰的引用变量的指向

    final修饰的引用变量一旦初始化赋值之后就不能再指向其他的对象,那么该引用变量指向的对象的内容可变吗?看下面这个例子: public class Test { public static void ...

  5. 【BZOJ-2843&1180】极地旅行社&OTOCI Link-Cut-Tree

    2843: 极地旅行社 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 323  Solved: 218[Submit][Status][Discuss ...

  6. 【poj1804】 Brainman

    http://poj.org/problem?id=1804 (题目链接) 题意 求逆序对 Solution1 归并排序. 每次合并时计算逆序对.  代码1 // poj1804 #include&l ...

  7. 【poj3020】 Antenna Placement

    http://poj.org/problem?id=3020 (题目链接) 题意 给出一个矩阵,矩阵中只有‘*’和‘o’两种字符,每个‘*’可以向它上下左右四个方位上同为‘*’的点连一条边,求最少需要 ...

  8. HttpClient教程

    2.1.持久连接 两个主机建立连接的过程是很复杂的一个过程,涉及到多个数据包的交换,并且也很耗时间.Http连接需要的三次握手开销很大,这一开销对于比较小的http消息来说更大.但是如果我们直接使用已 ...

  9. enum是不是"继承"int

    enum Color : short { Nono=0, Black=1 } 我们知道基元类型(值类型), 是不可能被继承的,那这里的   :short 到底是什么意思? 我个人理解这里是用来限制取值 ...

  10. 如何在ECSHOP前台后台中讲版权内容清除

    如何在ECSHOP前台后台中讲版权内容清除 作者:河南电脑学校网 点击次数:1065 发布时间:2012-02-02 20:13:58 一.ECSHOP前台显示的页面的版权在下面几个地方修改:(本人不 ...