如何在HTML5頁面中集成Jscroll
[英]How to integrate jscroll in html5 page
問題描述
我已經將jscroll集成到html頁面中，但是沒有任何反映
標頭部分
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" /> <script src="js/jquery.jscroll.min.js" /> <script src="js/jquery.jscroll.js" /> </head> <body> <div class=".scroll"> <!-- html code tag --> </div> <script type="text/javascript"> $(document).ready(function() { $('.scroll').jscroll({ autoTrigger: true }) }); </script> </body>
我指的是www.jscroll.com但什么也沒發生，您能幫我嗎，我在這里做什么錯
更新：
![<html>
<head>
<meta charset="utf-8"/>
<title>jQuery jScroll Plugin Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<script src="js/jquery.jscroll.js"/>
<link type="text/css" rel="stylesheet" href="layout/css/styles.css" />
</head>
<body>
<div class="scroll" style="margin-top:150px;" data-ui="jscroll-default">
<h3>Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin</h3>
<p>
This is the content of
<strong>page 1</strong>
in the jScroll example. Scroll to the bottom of this box to load the next set of content.
</p>
<p>This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.</p>
<p>With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.</p>
<h3>Page 2</h3>
<p>
This is the content of
<strong>page 2</strong>
in the jScroll example. Scroll to the bottom of this box to load the next set of content.
</p>
<p>Fusce et nunc sed nibh eleifend posuere. Integer sodales, elit sit amet porta varius, augue elit consectetur tortor, vitae rhoncus diam ipsum sed quam. Nullam turpis magna, convallis ultrices auctor ut, gravida eu leo. Pellentesque ut risus nibh, in ultrices ante. Suspendisse potenti. Vestibulum dolor sapien, dapibus non fringilla at, fringilla sed ipsum. In adipiscing mi nec risus hendrerit sollicitudin. Nullam eget felis tellus. Quisque dapibus molestie scelerisque. Curabitur sit amet tortor erat, et pretium nisl. Phasellus posuere, nibh vel feugiat sagittis, ligula lorem porttitor sapien, quis aliquam nisl nulla vel nunc.</p>
<h3>Page 3 - Final Page</h3>
<p>
This is the content of
<strong>page 3</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 4</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 5</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 6</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 7</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>Duis vel vestibulum tortor. Curabitur id nulla nec nunc porta blandit quis gravida eros. Proin dictum sagittis velit porta fringilla. Ut ac libero dui. Donec purus leo, semper condimentum porttitor vitae, feugiat vel elit. Etiam ut erat velit. Proin quis tortor lorem. Pellentesque ut lectus ligula. Donec ullamcorper, tellus at fringilla tristique, quam elit luctus felis, ut venenatis quam erat quis lacus. In consequat imperdiet magna posuere vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sodales, nisl eu accumsan molestie, mauris sem luctus sem, at volutpat turpis lorem non massa. Nulla erat turpis, auctor id congue ac, placerat et velit. Donec id ipsum erat, non pellentesque turpis. Nulla facilisi.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll').jscroll({autoTrigger: true})});
</script>
</body>
</html>]
我需要下面的屏幕快照
2 個解決方案
解決方案1
4 2015-06-12 05:53:49
請參見此處的延遲加載和jscroll示例
$('#product-grid').jscroll({
debug: true,
autoTriggerUntil: 2,
nextSelector: '.pager a:last',
contentSelector: '.product-grid',
callback:call()
});
function call()
{
alert("hi");
$("img.lazy").lazyload();
}
在這里，Product-Grid是div ID，其中包含所有其他類型相同的div，例如產品列表。
.pager'a：last'是分頁屬性類，例如a：last表示1> 2> next
因此，“ a：last”會在觸發時獲取下一個鏈接，因為您需要加載下一個內容，這樣您才能獲得
現在，當您獲得內容時，如何添加以及需要添加哪些內容，由.product-grid決定
和回調意味着觸發后調用函數，因此您可以在此處添加lazyload
我希望現在清楚
解決方案2
0 2015-06-11 13:24:32
如前所述，您的插件列出了兩次（您只能調用一次以防止出現問題）。
另外，您嘗試調用的類是div元素上的.scroll 。 不應有“。” 在班級名稱中。
但是，當從jQuery調用“。”時。 是必需的，因為它是調用“ scroll”類的任何元素的簡寫形式，如果您在何處調用名為“ scroll”的ID，則它將是＃號，或者如果您要尋址一個元素，則不需要簡寫形式。
我已經為您清理了代碼，只要內容大於視口，它就應立即運行。
<body>
<div class="scroll">
<!-- html code tag -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll').jscroll({
autoTrigger: true
})
});
</script>
</body>
如何在 iPhone 應用程序中集成 HTML5 & JavaScript？
[英]How to integrate HTML5 & JavaScript in iPhone application?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.