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 相关文章推荐
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
JavaScript如何操作css
Oct 24 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python读取并写入mat文件的方法
2019/07/12 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
如何开启linux的ssh服务
2013/06/03 面试题
竞聘演讲稿范文
2014/01/12 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
个人查摆剖析材料
2014/10/16 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL