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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • 一个简单的jQuery计算器实现了连续计算功能

    一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=

  • jquery计算鼠标和指定元素之间距离的方法

    本文实例讲述了jquery计算鼠标和指定元素之间距离的方法.分享给大家供大家参考.具体实现方法如下: (function() { var mX, mY, distance, $distance = $('#distance span'), $element = $('#element'); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.o

  • jQuery 计算iframe 窗口大小的方法

    复制代码 代码如下: <iframe id="aaax" src="" scrolling="no" frameborder="0" style="display:none"></iframe> <script language="javascript" type="text/javascript"> $(function () {

  • 基于jQuery的计算文本框字数的代码

    基于jQuery的计算文本框字数的代码

    一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后,点击确定,会让输入框闪动 二.功能分析 1.重点是用什么事件? 标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变. 2.字数的计算. 2.1一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个) 2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 3.闪动背

  • jQuery中scrollLeft()方法用法实例

    本文实例讲述了jQuery中scrollLeft()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量. 语法结构一: 当scrollLeft()方法没有参数的时候就是获取匹配元素相对滚动条左侧的偏移量. 复制代码 代码如下: $(selector).scrollLeft() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&quo

  • jQuery计算textarea中文字数(剩余个数)的小程序

    复制代码 代码如下: <div class="area">        <p>            还可以输入<b class="num">140</b>字</p>        <textarea class="chackTextarea"></textarea>    </div> <script type="text/java

  • jQuery实现购物车多物品数量的加减+总价计算

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现购物

  • 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

  • jquery计算出left和top,让一个div水平垂直居中的简单实例

    实例如下: if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window).height(); var o

  • jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery的位置

  • 用Jquery选择器计算table中的某一列某一行的合计

    用Jquery选择器计算table中的某一列某一行的合计

    利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便.下面以计算行合计为例: 核心算法: $('#tableId tr').each(function() { $(this).find('td:eq(columnIndex)').each(function() { totalAmount += parseFloat($(this).text()); }) }); 下面是案例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

随机推荐