0

我想在任何方向自由地制作具有动量的图像幻灯片（无快照）。

我遇到了iScroll4，这是一个很棒的脚本（在 iOS 和 Android 上效果很好）。

JS代码：

var myScroll;
function loaded() {

myScroll = new iScroll('wrapper', 
                { hScrollbar: false, 
                    vScrollbar: false,
                    snap:false,
                    vScroll: true,
                    hScroll: true
                     });
}

HTML 代码：

<div id="wrapper">
    <div id="scroller">
        <div id="thelist">
            <img id="theImg" src="https://www.google.com/images/srpr/logo4w.png" width="300px" height="200px">
        </div>
    </div>
</div>

CSS：

body,ul,li {
padding:0;
margin:0;
border:0;
}


#wrapper {
position:absolute; 
z-index:1;
top:-500px; 
bottom:0px; 
left:-500px;
width: 100%;
height: 100%;
overflow:auto;
background-color: red;
}

#scroller {
position:absolute; 
z-index:1;
padding:0;
width: 2000px;
height: 5000px;
background-color: blue;

}

#thelist {
list-style:none;
padding:0;
margin:0;
text-align:left;
background:none;
background-color: yellow;
}

#theContent {
background-color: grey;
}

#theImg {
position: relative;
top: 500px;
left: 500px;
}

我试图让包装器比屏幕大，这样图像可以滑出屏幕，然后使图像处于相对位置，所以它最初在屏幕上是可见的。

但我似乎无法摆脱顶部或左侧的捕捉。

我在这里做错了什么？

或者，是否有另一个图书馆可以做同样的工作？

4

0 回答 0