jQuery中scrollLeft()方法用法实例


Posted in Javascript onJanuary 16, 2015

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

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

语法结构一:

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

$(selector).scrollLeft()

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<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://3water.com/" />

<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/

Javascript 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 #Javascript
jQuery中position()方法用法实例
Jan 16 #Javascript
jQuery中offset()方法用法实例
Jan 16 #Javascript
jQuery中clone()方法用法实例
Jan 16 #Javascript
jQuery中empty()方法用法实例
Jan 16 #Javascript
jQuery中replaceAll()方法用法实例
Jan 16 #Javascript
jQuery中wrapInner()方法用法实例
Jan 16 #Javascript
You might like
php事务处理实例详解
2014/07/11 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
linux下安装easy_install的方法
2013/02/10 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python绘制3D图形
2018/05/03 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python3 下载网络图片代码实例
2019/08/27 Python
Django实现文件上传下载功能
2019/10/06 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python PyQt5整理介绍
2020/04/01 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
用python绘制樱花树
2020/10/09 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
土地转让协议书范本
2014/04/15 职场文书
2014年质检员工作总结
2014/11/18 职场文书
资产移交协议书
2016/03/24 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL