Jquery 仿手机左右拖动滑屏效果

23

2013
11

前不久公司有个项目是在触摸屏上做产品展示，大家都觉得Iphone或者Android上的滑屏效果不错，模仿着我今天也参考的做了一个DEMO的，主要的是下载js/jquery.ui.touch.js文件

参考效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>
   Jquery仿手机滑屏效果
  </title>
  <style type="text/css">
   * { margin: 0; padding: 0; } body { font: 12px/1.8 Arial; color: #666;
   } html{ width:100%; height:100%;} body{ background-image:url(bg.jpg); background-repeat:no-repeat;
   background-position:center; margin:0px; padding:0px; } p{ margin:0px;}
   .tips{ background-color:#333; color:#fff; font-family:Arial, Helvetica,
   sans-serif; line-height:25px; height:25px; font-size:12px; text-align:center;}
   #mousePoint{ line-height:25px; height:25px;} #pager{ clear:both; padding-top:320px;
   text-align:center;} #pager { text-align:center; margin:5px auto; } #pager
   a{margin-right:5px; margin-left:5px; text-align:center; background-image:url(point.png);
   width:13px; height:13px; float:left; } #pager a.current{background-image:url(currentpoint.png);
   } .pageWrapper{ width:100%; } #logo{ margin:10px auto; width:251px;} #slidePage
   { position:absolute; width:1380px; height:800px; overflow:hidden;background-color:#fff;
   border:1px solid #ccc; } #slidePageWrapper { width:100%; height:100%; overflow:hidden;
   position:relative; } .slidePageContent{ float: left; overflow:hidden; width:1380px;
   height:800px; background-color:#fff; }
  </style>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="js/jquery-1.4.4.min.js">
  </script>
  <script type="text/javascript" src="js/jquery.ui.touch.js">
  </script>
  <script type="text/javascript">
   $(function() {
    var h = $(window).height() - 15;
    var w = $(window).width() - 20;
    $("#slidePage").height(h);
    $("#slidePage").width(w);
    $(".slidePageContent").height(h);
    $(".slidePageContent").width(w);
    $(".slideContent").height(h);
    $(".slideContent").width(w);

    $('#slidePage').lyhucTouchPad({
     align: 'center',
     pager: '#pager',
     showmousePoint: false
    });
   });
  </script>
  <body onselectstart="return false" onselect="return false">
   <div class="wrap" style="margin-top: 10px;">
    <div class="pageWrapper">
     <div id="slidePage">
      <div id="slidePageWrapper">
       <div class="slidePageContent bgcolor1">
        <div class="pad-10 pad-101">
         <div class="slideContent" style="height: 900px; background: url(../images/2.jpg) no-repeat;background-size:100%;">
         </div>
        </div>
       </div>
       <div class="slidePageContent bgcolor2">
        <div class="pad-10">
         <div class="slideContent" style="height: 900px; background: url(../images/2.jpg) no-repeat; background-size:100%;">
         </div>
        </div>
       </div>
       <div class="slidePageContent bgcolor3">
        <div class="pad-10">
         <div class="slideContent" style="height: 900px; background: url(../images/3.jpg) no-repeat; background-size:100%;">
         </div>
        </div>
       </div>
       <div class="slidePageContent bgcolor4">
        <div class="pad-10">
         <div class="slideContent" style="height: 900px; background: url(../images/4.jpg) no-repeat; background-size:100%;">
         </div>
        </div>
       </div>
       <div class="slidePageContent bgcolor5">
        <div class="pad-10">
         <div class="slideContent" style="height: 900px; background: url(../images/5.jpg) no-repeat; background-size:100%;">
         </div>
        </div>
       </div>
      </div>
     </div>
     <div id="pager">
      <div>
      </div>
     </div>
    </div>
   </div>
  </body>