jQuery居中元素scrollleft计算方法示例


Posted in Javascript onJanuary 16, 2017

本文实例讲述了jQuery居中元素scrollleft计算方法。分享给大家供大家参考,具体如下:

如果需要将某个元素 在可以滚动元素(scroll)中设置为居中计算方法为:

需要的scrollleft + 普通居中时候的offsetLeft
= 当前的scrollleft+当前元素的offsetLeft
= 固定的当前元素在整个滚动条中距离左边的位置

DEMO示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery.js"></script>
  <style>
    ul, li {
      padding: 0px;
      margin: 0px;
      list-style: none;
    }
    ul {
      width: 1000000px;
    }
    li {
      height: 100px;
      float: left;
      border: 1px solid red;
    }
    li.selected {
      background-color: yellow;;
    }
  </style>
</head>
<body>
<div class="container" id="J_container"
style="width: 200px;height: 100px;border:1px solid gray; overflow-x: scroll; overflow-y: hidden;">
  <ul>
    <li>测试1</li>
    <li>测试1</li>
    <li>测试1</li>
    <li>测试1</li>
    <li>测试1</li>
    <li>测试1</li>
    <li>测试1</li>
    <li class="selected">请将我居中</li>
    <li>测试1</li>
    <li>测试1</li>
  </ul>
</div>
<script>
  $(function () {
    var item = $(".selected");
    var container = $("#J_container");
    var itemOffset = item.offset();
    var itemOffsetLeft = itemOffset.left + container.scrollLeft();
    var centerLeft = ( container.width() - item.width()) / 2;
    container.scrollLeft(itemOffsetLeft - centerLeft);
  })
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 #Javascript
JavaScript日期选择功能示例
Jan 16 #Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 #Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 #Javascript
Node.js中用D3.js的方法示例
Jan 16 #Javascript
JavaScript实现的select点菜功能示例
Jan 16 #Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 #Javascript
You might like
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
php二维码生成
2015/10/19 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python如何将函数值赋给变量
2020/04/28 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
Linux常见面试题
2013/03/18 面试题
小学教师学期末自我评价
2013/09/25 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
关于运动会的广播稿
2014/09/22 职场文书
转变工作作风心得体会
2016/01/23 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
Python循环之while无限迭代
2022/04/30 Python