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程序设计有所帮助。
-
本文向大家介绍jQuery插件实现控制网页元素动态居中显示，包括了jQuery插件实现控制网页元素动态居中显示的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
我想数一数一条流的不同元素，我想知道为什么 不行，日蚀告诉我 类型收集器中的方法toMap（Function，Function，BinaryOperator）不适用于参数（（s）- 顺便说一句，我知道这个解决方案： 所以我有两个问题： 我的第一个方法有什么错误 编辑：我自己解决了第一个问题： Java需要一个函数作为第二个参数。
-
本文向大家介绍jQuery 添加元素和删除元素的方法，包括了jQuery 添加元素和删除元素的方法的使用技巧和注意事项，需要的朋友参考一下 添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插
-
这个标题可能有点误导人，我不知道从哪里开始，甚至不知道该搜索什么 我有一个页面，上面有10个div元素（比如div1、div2、div3等） 我希望能够有一个jquery函数以滚动的方式显示它们 例如开始显示div1、div2、div3、div4 10秒后，显示div2、div3、div4、div5 10秒后，显示div3、div4、div5、div6 ...等循环 10秒后，显示div8、div
-
我正在寻找一种方法来计算步数： 我想我的问题有两方面： 我不明白C#和中的特殊 运算符 我不知道在哪里将某种变量输入到方法中。 一直在尝试通过微软的指南阅读 运算符的信息，但我仍然难以理解 内部发生了什么。 我的代码当前如下所示。这能正确吗？ 很抱歉让人困惑。我将尝试缩小范围：如何将计数器放入？ 我的任务的主要范围是对提供的fhcimolin方法进行全面测试，并将该方法与进行比较。一个小的附带任务
-
本文向大家介绍JQuery显示隐藏页面元素的方法总结，包括了JQuery显示隐藏页面元素的方法总结的使用技巧和注意事项，需要的朋友参考一下 在jquery中显示隐藏div方法方法有很多种，如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作，下面我来介绍。 show()方法 显示出隐藏的 <p> 元素。 toggle(