jQuery居中元素scrollleft計(jì)算方法示例
本文實(shí)例講述了jQuery居中元素scrollleft計(jì)算方法。分享給大家供大家參考，具體如下：
如果需要將某個(gè)元素 在可以滾動(dòng)元素（scroll）中設(shè)置為居中計(jì)算方法為：
需要的scrollleft + 普通居中時(shí)候的offsetLeft
= 當(dāng)前的scrollleft+當(dāng)前元素的offsetLeft
= 固定的當(dāng)前元素在整個(gè)滾動(dòng)條中距離左邊的位置
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>測(cè)試1</li>
<li>測(cè)試1</li>
<li>測(cè)試1</li>
<li>測(cè)試1</li>
<li>測(cè)試1</li>
<li>測(cè)試1</li>
<li>測(cè)試1</li>
<li class="selected">請(qǐng)將我居中</li>
<li>測(cè)試1</li>
<li>測(cè)試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>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jquery事件綁定解綁機(jī)制源碼，感興趣的小伙伴們可以參考一下2016-09-09
關(guān)于 jQuery Easyui異步加載tree的問(wèn)題解析
想要實(shí)現(xiàn)從本地中加載json文件，通過(guò)事件來(lái)動(dòng)態(tài)的插入到ul中時(shí)，遇到了一小bug,下面小編給大家解答下2016-12-12
下面小編就為大家?guī)?lái)一篇使用JQuery中的trim()方法去掉前后空格。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法示例
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法,結(jié)合實(shí)例形式分析了jQuery form表單創(chuàng)建與提交相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jquery實(shí)現(xiàn)帶單選按鈕的表格行選中時(shí)高亮顯示
如果將選中的這條記錄的行高亮顯示，同時(shí)該行的單選按鈕也被選中了，這樣會(huì)提高用戶的體驗(yàn)的，于是本文下了個(gè)示例，有需要的朋友可以參考下2013-08-08
jQuery調(diào)用AJAX時(shí)Get和post公用的亂碼解決方法實(shí)例說(shuō)明
js調(diào)用AJAX時(shí)Get和post的亂碼解決辦法以前有寫過(guò)的但是使用js代碼比較繁瑣，下面與大家分享下使用jQuery該怎么解決，遇到類似情況的朋友可以參考下哈2013-06-06
jackson解析json字符串,首字母大寫會(huì)自動(dòng)轉(zhuǎn)為小寫的方法
下面小編就為大家分享一篇jackson解析json字符串,首字母大寫會(huì)自動(dòng)轉(zhuǎn)為小寫的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jquery實(shí)現(xiàn)郵箱自動(dòng)填充提示功能
這篇文章主要介紹了jquery實(shí)現(xiàn)郵箱自動(dòng)填充提示功能，為了提高用戶的體驗(yàn)，很多網(wǎng)站都會(huì)實(shí)現(xiàn)郵箱輸入的自動(dòng)提示功能，對(duì)如何實(shí)現(xiàn)自動(dòng)提示功能感興趣的小伙伴們可以參考一下2015-11-11
jQuery validate(submitHandler函數(shù))驗(yàn)證通過(guò)發(fā)送Ajax(實(shí)例詳解)
這篇文章主要介紹了jQuery validate(submitHandler函數(shù))驗(yàn)證通過(guò)發(fā)送Ajax，可以用validate框架驗(yàn)證元素，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-10-10
ajax是局部刷新。用jQuery來(lái)實(shí)現(xiàn)，會(huì)簡(jiǎn)化很多。下面進(jìn)行詳細(xì)的說(shuō)明，結(jié)合一個(gè)ajax刪除的案例來(lái)進(jìn)行2014-02-02