jQuery中scrollLeft()方法用法實例
更新時間：2015年01月16日 15:49:26 投稿：shichen2014
這篇文章主要介紹了jQuery中scrollLeft()方法用法,實例分析了scrollLeft()方法的功能、定義及獲取或設置匹配元素相對滾動條左側的偏移(offset)量時的使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中scrollLeft()方法用法。分享給大家供大家參考。具體分析如下：
此方法獲取或設置匹配元素相對滾動條左側的偏移(offset)量。
語法結構一:
當scrollLeft()方法沒有參數(shù)的時候就是獲取匹配元素相對滾動條左側的偏移量。
復制代碼 代碼如下:
$(selector).scrollLeft()
實例代碼:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
#div1{
border:1px solid black;
width:200px;
height:200px;
overflow:auto
}
#div2{
height:150px;
width:400px;
}
#div3{
height:40px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("#div1").scrollLeft());
});
})
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<button>獲取offset值</button>
</body>
</html>
語法結構二:
當scrollLeft()帶有參數(shù)的時候是設置匹配元素相對滾動條左側的偏移量。
復制代碼 代碼如下:
$(selector).scrollLeft(val)
參數(shù)列表:
實例代碼:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
#div1{
border:1px solid black;
width:200px;
height:200px;
overflow:auto
}
#div2{
height:150px;
width:400px;
}
#div3{
height:40px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").scrollLeft(100);
});
});
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<button>設置offset值</button>
</body>
</html>
希望本文所述對大家的jquery程序設計有所幫助。
本文轉自：螞蟻部落http://www.softwhy.com/
您可能感興趣的文章:
- 淺談jQuery頁面的滾動位置scrollTop、scrollLeft
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- jquery計算鼠標和指定元素之間距離的方法
- jquery計算出left和top,讓一個div水平垂直居中的簡單實例
- 用Jquery選擇器計算table中的某一列某一行的合計
- 一個簡單的jQuery計算器實現(xiàn)了連續(xù)計算功能
- jQuery實現(xiàn)購物車多物品數(shù)量的加減+總價計算
- jQuery 計算iframe 窗口大小的方法
- jQuery計算textarea中文字數(shù)(剩余個數(shù))的小程序
- 基于jQuery的計算文本框字數(shù)的代碼
- jQuery居中元素scrollleft計算方法示例
相關文章
這篇文章主要介紹了jQuery制作可自定義大小的拼圖游戲的代碼，非常的簡單實用，雖然還只是局限于數(shù)字順序的拼圖，后續(xù)慢慢完善上圖片，但還是分享給大家，有需要的小伙伴可以參考下。2015-03-03
不定義JQuery插件，不要說會JQuery，為什么這么說，請看下文2016-03-03
兼容主流瀏覽器的jQuery+CSS 實現(xiàn)遮罩層的簡單代碼
比起使用注冊頁和登陸頁，網(wǎng)站在當前頁使用遮罩層注冊和登陸的用戶體驗要好不少。這里使用jQuery和CSS實現(xiàn)一個簡單的遮罩效果。2014-10-10
jQuery Mobile操作HTML5的常用函數(shù)總結
jQuery Mobile是針對移動端開發(fā)的JavaScript框架,正如其名基于jQuery庫,jQuery Mobile主要被用來操作HTML5設計頁面UI,下面就來看一下jQuery Mobile操作HTML5的常用函數(shù)總結:2016-05-05
jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏)
jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏)，需要的朋友可以參考一下2013-05-05
滑動門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實現(xiàn)層切換的2013-09-09
這篇文章主要介紹了jQuery簡單注冊和禁用全局事件的方法,結合實例形式分析了jQuery中ajaxStart與ajaxStop方法的使用技巧,需要的朋友可以參考下2016-07-07
jQuery實現(xiàn)點擊小圖片淡入淡出顯示大圖片特效
本文給大家分享基于jquery實現(xiàn)的一款圖片特效，當點擊小圖片時會淡入淡出大圖片，通過定義需要展示的圖片以及圖片要展示的時間，來實現(xiàn)這一效果，感興趣的朋友跟著小編一起來學習吧2015-09-09
這篇文章主要為大家詳細介紹了jquery分頁插件pagination的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了移動端jQuery修正Web頁面滑動時div問題的兩則實例,分別針對頂部固定fixed不為0時滑動出現(xiàn)的閃動以及touchmove的受阻止的相關問題,需要的朋友可以參考下2016-05-05