个人中心
gpt4 book ai didi

javascript - 在 HTML 小部件中横向滚动

转载 作者：太空宇宙 更新时间：2023-11-03 18:19:36 24 4
gpt4 key购买 nike

所以我正在为 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>

最佳答案

我制作了在计算机浏览器和移动设备上也能运行的小演示..

演示: http://mediakuu.fi/mobile_demo/

将此添加到您的 html header 以防止用户调整您的网站大小:

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

为了使事情顺利和容易地进行:

完整来源:

<!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>

关于javascript - 在 HTML 小部件中横向滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22117752/

24 4 0
文章推荐： html - 在 IE8 及以下版本中使用 selectivizr 的 CSS3 伪类
文章推荐： ruby-on-rails - 如何在 Rails 上创建 Controller 和模型后仅创建 View
文章推荐： python 相当于 MATLAB 语句 A(B==1)= C
文章推荐： javascript - 试图强制不同大小的 block float :left and stick to the top. 。
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com