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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
纯js实现动态时间显示
Sep 07 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
vue实现五子棋游戏
May 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
JavaScript手机振动API
2016/06/11 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
使用async-validator编写Form组件的方法
2018/01/10 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
银行职业规划书范文
2013/12/28 职场文书
社区八一活动方案
2014/02/03 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
党性教育心得体会
2014/09/03 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
网络销售员岗位职责
2015/04/11 职场文书
追讨欠款律师函
2015/05/27 职场文书