快捷導(dǎo)航

jQuery響應(yīng)滾動(dòng)條事件功能示例

更新時(shí)間：2017年10月14日 11:42:54 作者：一笑而過

這篇文章主要介紹了jQuery響應(yīng)滾動(dòng)條事件功能,可實(shí)現(xiàn)針對滾動(dòng)條狀態(tài)的實(shí)時(shí)計(jì)算與響應(yīng)功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery響應(yīng)滾動(dòng)條事件功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
  var lazyheight = 0;
  //獲取數(shù)據(jù)
  function showload() {
    lazyheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
    if ($(document).height() - 100 <= lazyheight) {
      alert("xxx");
    }
  }
  //showload();
  //綁定事件
  $(window).bind("scroll",
  function() {
    //當(dāng)滾動(dòng)條滾動(dòng)時(shí)
    showload();
  });
})
</script>
</head>
<body>
<img src="1.jpg"/><br/>
<img src="2.jpg"/><br/>
<img src="3.jpg"/>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery滾動(dòng)組件(vticker.js)實(shí)現(xiàn)頁面動(dòng)態(tài)數(shù)據(jù)的滾動(dòng)效果
本文為大家想你想介紹下jquery實(shí)現(xiàn)頁面動(dòng)態(tài)數(shù)據(jù)的滾動(dòng)效果。似乎只有通過div-ul-li標(biāo)簽嵌套的方式才能實(shí)現(xiàn)表格多行多列的滾動(dòng)效果
2013-07-07
jQuery+formdata實(shí)現(xiàn)上傳進(jìn)度特效遇到的問題
這篇文章主要介紹了jQuery+formdata實(shí)現(xiàn)上傳進(jìn)度特效遇到的問題的相關(guān)資料,需要的朋友可以參考下
2016-02-02
jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏)
jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏)，需要的朋友可以參考一下
2013-05-05
jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能示例【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應(yīng)處理技巧.非常簡單實(shí)用,需要的朋友可以參考下
2017-01-01
jQuery 獲取遍歷獲取table中每一個(gè)tr中的第一個(gè)td的方法
下面小編就為大家?guī)硪黄猨Query 獲取遍歷獲取table中每一個(gè)tr中的第一個(gè)td的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
Jquery 類網(wǎng)頁微信二維碼圖塊滾動(dòng)效果具體實(shí)現(xiàn)
網(wǎng)頁微信二維碼圖塊滾動(dòng)效果想必大家都有見到過吧，在接下來的文章中將為大家詳細(xì)介紹下使用Jquery是如何實(shí)現(xiàn)，感興趣的朋友可以參考下
2013-10-10
25個(gè)優(yōu)雅的jQuery Tooltip插件推薦
jQuery 工具提示可以讓網(wǎng)站上一些小的幫助信息顯示更加直觀，提升用戶的體驗(yàn)。
2011-05-05
jquery圖片滾動(dòng)放大代碼分享（1）
這篇文章主要介紹了jquery圖片滾動(dòng)放大效果，功能實(shí)現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jquery UI Datepicker時(shí)間控件的使用方法（加強(qiáng)版）
這篇文章繼續(xù)介紹了jquery UI Datepicker時(shí)間控件的使用方法，主要關(guān)于Datepicker插件的介紹和使用，并分享了第一個(gè)日歷插件的使用實(shí)例，需要的朋友可以參考下
2015-11-11
jquery提升性能最佳實(shí)踐小結(jié)
因?yàn)閖query的易用性，很多朋友使用jquery，但仍然需要注意的是性能的問題，下面是曾祥展特為大家整理的一些技巧。
2010-12-12