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)
参数列表:
实例代码:
复制代码 代码如下:
<!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页面的滚动位置scrollTop、scrollLeft
- jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- jquery计算鼠标和指定元素之间距离的方法
- jquery计算出left和top,让一个div水平垂直居中的简单实例
- 用Jquery选择器计算table中的某一列某一行的合计
- 一个简单的jQuery计算器实现了连续计算功能
- jQuery实现购物车多物品数量的加减+总价计算
- jQuery 计算iframe 窗口大小的方法
- jQuery计算textarea中文字数(剩余个数)的小程序
- 基于jQuery的计算文本框字数的代码
- jQuery居中元素scrollleft计算方法示例
相关文章
jquery blockUI 遮罩不能消失与不能提交的解决方法
jquery blockUI 遮罩不能消失与不能提交的解决方法，使用jquery blockUI的朋友可以参考下。2011-09-09
我经常抱怨jQuery的DOM操作性能并不优秀，并且经常尝试用一些方法去进行优化，但是越是优化，越是沮丧地发现jQuery其实已经做得很好，从使用者的角度能够进行的优化实在有限2011-02-02
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果附演示代码 ，喜欢的朋友可以参考下2013-08-08
这篇文章主要介绍了jQuery的$.extend 浅拷贝与深拷贝的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JQuery的ready函数与JS的onload的区别，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了jquery-file-upload 文件上传带进度条效果，代码分为html部分css部分和js部分，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-11-11
Jquery跨域获得Json时invalid label错误的解决办法
这两天用 Jquery 跨域取数据的时候，经常碰到 invalid label 这个错误，十分的郁闷，老是取不到服务器端发送回来的 json 值，一般跨域用到的两个方法为：$.ajax 和 $.getJson2011-01-01
带空格 表示的是选择class为test里面隐藏的元素；不带空格 表示的是选择隐藏的class为test的元素，在使用过程中一定需要注意下2013-07-07
这篇文章主要介绍了jQuery实现下拉框功能实例代码的相关资料,需要的朋友可以参考下2016-05-05
jQuery md5加密插件jQuery.md5.js用法示例
这篇文章主要介绍了jQuery md5加密插件jQuery.md5.js用法,结合实例形式简单分析了jQuery md5加密插件jquery.md5.js的简单使用技巧,需要的朋友可以参考下2018-08-08
最新评论