<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="./base/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>

技术交流QQ群：15129679

jquery scrollLeft居中的更多相关文章

  1. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  2. jQuery scrollLeft()与scrollTop() 源码解读

    这里的实现也很容易懂,通过jQuery的静态方法each给jQuery的原型添加scrollLeft和scrollTop方法. 这里在取值时它把window和普通的element做了区分 如果是win ...

  3. jquery层居中,点击小图查看大图,弹出层居中代码

    1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. 不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目

    function showLoad(tipInfo, type, autohide) { var pic = ""; switch (type) { case 0: // load ...

  5. jquery弹窗居中-类似alert()

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 使用jQuery对图片进行居中设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery常用代码集锦

    1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({     ajaxSettings : {         contentT ...

  8. jquery 点点滴滴小记

    字符截取显示 var text = $(".content").text(); var textNum = text.length; var textInt = text.slic ...

  9. Jquery实用代码片段（转）

    1.把所有带有#的空链接换成不友情的链接 $('a[href="#"]').each(function() { $(this).attr('href', 'javascript:v ...

随机推荐

  1. js-事件、正则表达式

    AddEventListener()之中有三个参数,分别是(1)事件的名称(注:不要加on,例:click才是点击事件的名称)(2)需要执行的function(){} (3)布尔类型(false表示的 ...

  2. 中国排名前100的IT公司 （转）

    排序 单位名称 软件收入 1 华为技术有限公司 622360  2 中兴通讯股份有限公司 601331  3 海信集团有限公司 448641  4 UT斯达康通讯有限公司 386763  5 海尔集团 ...

  3. mysql 常用配置

    1. 帐号不允许从远程登陆,只能在localhost 这个时候只要在localhost的那台电脑,登入mysql后,更改 “mysql” 数据库里的 “user” 表里的 “host” 项,从“loc ...

  4. [SmartFoxServer概述]使用文档

    如何使用文档和例子 这份文档提供了一份关于如何通过SmartFoxServer 2X(缩写SFS2X)文档掌握要点的快速教程.在使用例子和技术文档之前,我们建议先参考以下主题内容. 不管你是Smart ...

  5. ES6 fetch函数与后台交互

    最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XML ...

  6. Circle3Quit数到三的人退出

    public class Circle3Quit {public static void main(String args[]) {boolean arr[] = new boolean[500];/ ...

  7. poj 1936 All in All

    All in All Time Limit: 1000 MS Memory Limit: 30000 KB 64-bit integer IO format: %I64d , %I64u   Java ...

  8. spring jpa @Query中使用in

    @Modifying @Query("delete from SmTenant s where s.id in ?1") void deleteByIds(List<Long ...

  9. Replication--复制延迟的诊断和解决

    要解决复制延迟问题,需要首先定位复制延迟发生点,再找出复制延迟的原因,再做相应处理. 复制延迟发生点:1. 发布服务器2. 分发服务器3. 订阅服务器4. 发布服务器与分发服务器和分发服务器与订阅服务 ...

  10. 记录ASP.NET Web API 服务接口响应时间

    实现起来很简单,一个Filter就可以搞定!!! /// <summary> /// 监控接口执行时间 /// </summary> public class TimingAc ...