jQuery的角滾動事業部

-1

如果你看一下這個插件：http://cubiq.org/infiniwall jQuery的角滾動事業部

您可以滾動的div容器在任何方向，而不僅僅是水平或垂直的，你也可以滾動時改變方向，而無需移開你的手指。

我該如何做到這一點？我似乎無法找到允許它的插件。

在此先感謝。

來源

2012-11-16 CoreyRS

請不要張貼問題，說：「這樣做對我」還要注意。在SO，你應該展示你的嘗試，然後我們可以幫助你。 –

https://github.com/cubiq/infiniwall/blob/master/src/infiniwall.js –

好吧，就像我平時所做的那樣，如果我嘗試了一些我會說的話。我也查看了代碼，但無法找到腳本允許的部分。 – CoreyRS

我相信，你只需要<div id="infiniwall">與var iw = new InfiniWall('#infiniwall');使用<!DOCTYPE html>

https://github.com/cubiq/infiniwall/tree/master/demos/simple

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>InfiniWall - Indefinitely panning layer in Javascript</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
    <script src="../../src/infiniwall.js"></script> 
</head> 

<style> 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

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

#infiniwall { 
    margin: 140px auto 0 auto; 
    width: 510px; 
    height: 420px; 
    background: #ddd; 
    overflow: hidden; 
    position: relative; 
} 

ul { 
    position: absolute; 
    top: -140px; 
    left: -170px; 
    width: 850px; 
    height: 700px; 
    list-style: none; 

    -webkit-transform: translate(0px, 0px) translateZ(0); 
    -moz-transform: translate(0px, 0px) translateZ(0); 
    -ms-transform: translate(0px, 0px) translateZ(0); 
    -o-transform: translate(0px, 0px) translateZ(0); 
    transform: translate(0px, 0px) translateZ(0); 
} 

li { 
    display: block; 
    position: relative; 
    float: left; 
    width: 170px; 
    height: 140px; 
    -webkit-transform: translate(0px, 0px) translateZ(0); 
    -moz-transform: translate(0px, 0px) translateZ(0); 
    -ms-transform: translate(0px, 0px) translateZ(0); 
    -o-transform: translate(0px, 0px) translateZ(0); 
    transform: translate(0px, 0px) translateZ(0); 
    display: block; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
    overflow: hidden; 
} 

li img { 
    position: absolute; 
} 

.spinner { 
    display: block; 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    left: -9999px; 
    top: 50%; 
    margin-top: -35px; 
    margin-left: -20px; 
    background: url(images/loading.png) no-repeat; 
} 

.loading .spinner { 
    left: 50%; 
    -webkit-animation: spin 2s linear infinite; 
    -moz-animation: spin 2s linear infinite; 
    -o-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 

@keyframes spin { 
    from { 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
     -moz-transform: rotate(360deg); 
     -ms-transform: rotate(360deg); 
     -o-transform: rotate(360deg); 
     transform: rotate(360deg); 
    } 
} 

@-moz-keyframes spin { 
    from { 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
     -moz-transform: rotate(360deg); 
     -ms-transform: rotate(360deg); 
     -o-transform: rotate(360deg); 
     transform: rotate(360deg); 
    } 
} 

@-webkit-keyframes spin { 
    from { 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
     -moz-transform: rotate(360deg); 
     -ms-transform: rotate(360deg); 
     -o-transform: rotate(360deg); 
     transform: rotate(360deg); 
    } 
} 

@-o-keyframes spin { 
    from { 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(360deg); 
     -moz-transform: rotate(360deg); 
     -ms-transform: rotate(360deg); 
     -o-transform: rotate(360deg); 
     transform: rotate(360deg); 
    } 
} 

.loading img { 
    left: -9999px; 
} 

li span { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: rgba(0,0,0,0.6); 
    color: #fff; 
    padding: 5px; 
    font-size: 19px; 
} 

</style> 
<body> 
    <div id="infiniwall"> 
     <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 

      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 

      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 

      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 

      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
    </div> 

<script> 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
var iw = new InfiniWall('#infiniwall'); 
</script> 

</body>

來源

2012-11-16 17:59:54

我做了，因爲它的作品（因爲你刪除了你的評論，你問我爲什麼粘貼工作示例）。檢查你的錯誤日誌。我不能教你編碼。 –

jQuery的角滾動事業部

回答

相關問題