Question

我正在尝试使用div在iframe中动态刷卡内容。好吧，我有滑动和其他功能的代码工作正常，我只需要帮助创建一个像玻璃一样工作的div来刷它，你知道吗？

这是我的代码： HTML

<html>
   <body>
      <div id="swiper">
    <main class="mdl-layout__content" id="main">
        <div id="slider">
            <iframe id="content"></iframe>
            <div class="left_hold"><img id="left_-1" onClick="slideMove(this)" class="left" src="Images/arrow_left.png"></div>
            <div class="right_hold"><img id="right_1" onClick="slideMove(this)" class="right" src="Images/arrow_right.png"></div>                
        </div>
    </main>
    </div>
</body>
</html>

内容（html页面）以动态方式放入iframe元素中。要翻转的div是id =“swiper”。

CSS：

#swiper{ display: block;    height: 100vh;    border: none;    overflow: auto;}

iframe {
position: absolute;
display: block;
width: 100%;
height: 100%;
border: none;
overflow: auto;
}

JavaScript to Swip（可行）：

$(function() {
  //Enable swiping...
  $("#swiper").swipe( {
    //Generic swipe handler for all directions
     swipeLeft:function(event, direction, distance, duration, fingerCount) {
        slideMove($(".right")[0]);
    },
      swipeRight:function(event, direction, distance, duration, fingerCount) {
        slideMove($(".left")[0]);
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });
});

发生的事情是：滑动移动仅适用于我页面顶部的一小块空间（swiper div开始的地方），但是当我在浏览器中检查div元素时，它会显示在整页中。当我滑入这个元素的其他部分时，为什么它不起作用？

很多!!!

划分内部的元素

0 个答案: