Question

所以我正在为iPhone制作一个天气小部件，并想知道如何能够“滚动”到另一个页面本身。我应该包括什么才能向右滚动？我怎么做到这样我才能侧身滚动？我已经尝试过加倍宽度但没有发生任何事情......请尽可能详细:)谢谢！

<html>
<title>Forecast</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/drag.js"></script>

<link href="css/main.css" rel="stylesheet" type="text/css" />

</head>

<body>

 <meta name="viewport" content="width=320, height=583, initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<span id="time" style="position:absolute;
width: 320px;
height: 200px;
left: -209
text-align: center;
z-index: +4;
top: 22.5px;
font-family: HelveticaNeue-UltraLight;
color:white;
font-size: 41px;
font-weight: 100;">
</span> 

<span id="dates" style="position: absolute;
top: 27px;
width: 320px;
height: 60px;
left: -17px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;">
</span>

<span id="dattes" style="
position: absolute;
top: 47px;
width: 320px;
left: -17px;
height: 60px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;
">
</span>



</body>
</html>

Answer 1

我制作了一个可以在计算机浏览器和移动设备上运行的小型演示..

DEMO： http://mediakuu.fi/mobile_demo/

将此添加到您的html标头中，以防止用户调整您的网站大小：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

让事情顺利而轻松：

使用此插件（hammer.js）http://eightmedia.github.io/hammer.js/获取用户手势。
使用此插件（jquery.transit）http://ricostacruz.com/jquery.transit/创建平滑移动

完整来源：

<!DOCTYPE html> 
<html> 
  <head> 
    <title>MOBILE SCROLL DEMO</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">


    <style type="text/css">

      body {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
      }

      #wrapper {
        position: absolute;
        left: 0px;
        top: 0px;
      }

      .section {
        position: absolute;
        top: 0px;
      }

      #section1 {
        background: #226633;
      }

      #section2 {
        background: #992211;
      }

      #section3 {
        background: #773344;
      }

      #section4 {
        background: #993344;
      }


    </style>


    <script src="js/jquery.js"></script> 
    <script src="js/jquery.hammer.min.js"></script> 
    <script src="js/jquery.transit.min.js"></script> 

    <script>


      $(document).ready(function() {

        var 
          ww = 0, 
          wh = 0, 
          current_x = 0, 
          current_section = 0, 
          new_section = 0, 
          $wrapper = $('#wrapper');


        function resizeElements() {

          // Get window dimensions
          ww = $(window).width();
          wh = $(window).height();

          // Resize sections to match window size
          $(".section").css({
            width : ww + 'px',
            height : wh + 'px'
          });

          $(".section").each(function(ind) {
            $(this).css({
              'left': (ind * ww) + 'px'
            });  
          });

        }

        // Check for window resize (user changing device orientation)..
        $(window).bind('resize orientationchange', function() {

          resizeElements();
        });

        // Resize elements once document loaded
        resizeElements();

        // Use plugin called hammer.js to get touch gestures
        $wrapper.hammer().on("dragright dragleft dragend", function(ev) {

          switch(ev.type) {
            case "dragleft":
            case "dragright":

              //User is dragging horizontally, calculate current x from section index
              current_x = 0 - (ww * current_section);

              // Use transit plugin to move wrapper with CSS3 animation
              $wrapper.transition({
                x : current_x + parseInt(ev.gesture.deltaX)
              }, 0, 'linear');

              break;

            case "dragend":

              // User released finger. Check if dragged
              // over 30% of screenwidth or if user made quick swipe..
              // deltaX can be > 0 or < 0 so use abs to get positive value
              if ((Math.abs(ev.gesture.deltaX) / ww) > 0.3 || ev.gesture.velocityX > 1.5) {

                // Scroll to next or previous section
                new_section = (ev.gesture.deltaX > 0 ? current_section - 1 : current_section + 1);

                // If scrolling over section index.. scroll back to old..
                if (new_section < 0 || new_section > $('.section').length-1)
                   new_section = current_section;

              } else {

                // Not scrolled that much.. animate back to old section
                new_section = current_section;
              }

              // Calculate section x position
              current_x = 0 - (ww * new_section);

              // Animate wrapper to new position.. animation length 400 millisecods
              // with "linear" easing..
              $wrapper.transition({
                x : current_x
              }, 400, 'linear', function() {

                // Set new section as current when animation
                // completes
                current_section = new_section;
              });

              break;

          }

        });

      });

    </script>


  </head> 
  <body> 
    <div id="wrapper">
      <div class="section" id="section1">
       <p>section1</p>
      </div>
      <div class="section" id="section2">
       <p>section2</p>
      </div>
      <div class="section" id="section3">
       <p>section3</p>
      </div>
      <div class="section" id="section4">
       <p>section4</p>
      </div>      
    </div>
  </body>
</html>

在HTML小部件内侧滚动

1 个答案: