脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery中scrollLeft()方法用法

jQuery中scrollLeft()方法用法实例

 更新时间：2015年01月16日 15:49:26   投稿：shichen2014  
这篇文章主要介绍了jQuery中scrollLeft()方法用法,实例分析了scrollLeft()方法的功能、定义及获取或设置匹配元素相对滚动条左侧的偏移(offset)量时的使用技巧,需要的朋友可以参考下

本文实例讲述了jQuery中scrollLeft()方法用法。分享给大家供大家参考。具体分析如下：

此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量。

语法结构一:

当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量。

复制代码 代码如下:
$(selector).scrollLeft()

实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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()带有参数的时候是设置匹配元素相对滚动条左侧的偏移量。

复制代码 代码如下:
$(selector).scrollLeft(val)

参数列表:

参数 描述
val 设置水平滚动条左侧偏移量

实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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中prev()方法用法实例

    jQuery中prev()方法用法实例

    这篇文章主要介绍了jQuery中prev()方法用法,实例分析了prev()方法的功能、定义及取得匹配元素集合中每个元素紧邻的前一个同辈元素使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery对象与DOM对象之间的转换方法

    jQuery对象与DOM对象之间的转换方法

    刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。
    2010-04-04
  • jQuery实现在列表的首行添加数据

    jQuery实现在列表的首行添加数据

    这篇文章主要介绍了jQuery实现在列表的首行添加数据的方法，十分的简单，有需要的小伙伴可以参考下。
    2015-05-05
  • JQuery radio（单选按钮）操作方法汇总

    JQuery radio（单选按钮）操作方法汇总

    这篇文章主要介绍了JQuery radio（单选按钮）操作方法汇总,本文讲解了获取选中值、设置选中值、根据Value值设置选中、删除Radio、遍历等内容,需要的朋友可以参考下
    2015-04-04
  • jquery.tableSort.js表格排序插件使用方法详解

    jquery.tableSort.js表格排序插件使用方法详解

    这篇文章主要为大家详细介绍了jquery.tableSort.js表格排序插件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jquery实现下拉框功能效果【实例代码】

    jquery实现下拉框功能效果【实例代码】

    下面小编就为大家带来一篇jquery实现下拉框功能效果【实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-05-05
  • jquery中的过滤操作详细解析

    jquery中的过滤操作详细解析

    这篇文章主要介绍了jquery中的过滤操作。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 一个简单的jquery的多选下拉框(自写)

    一个简单的jquery的多选下拉框(自写)

    想在网上找一个插件用用，可是，网上的插件看起来都比较杂乱，我参考了网上的一些插件，自己用jquery写了一个多选下拉框
    2014-05-05
  • 轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

    轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

    这篇文章主要帮大家轻松学习jQuery插件EasyUI，并利用EasyUI实现拖动基本操作，文章并提供了一个学校课程表简单实例，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • Web前端新人笔记之jquery入门心得(新手必看)

    Web前端新人笔记之jquery入门心得(新手必看)

    下面小编就为大家带来一篇Web前端新人笔记之jquery入门心得(新手必看)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-05-05

最新评论