<!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. UWP深入学习二:各种激活方式

    Launching, resuming, and multitasking How to launch an app for results Auto-launching with file and ...

  2. 关于MATHAPP的测试

    这是我个人的单元测试博客仅供参考,想了解更全面的信息可请见我们团队的博客http://www.cnblogs.com/xjy-gg/p/5422868.html 首先,从世界那里下载adt-bundl ...

  3. MySQL设置字符集CHARACTER SET

    本文地址:http://www.cnblogs.com/yhLinux/p/4036506.html 在 my.cnf 配置文件中设置相关选项,改变为相应的character set. 设置数据库编码 ...

  4. 拉格朗日乘子法和KKT条件

    拉格朗日乘子法(Lagrange Multiplier)和KKT(Karush-Kuhn-Tucker)条件是求解约束优化问题的重要方法,在有等式约束时使用拉格朗日乘子法,在有不等约束时使用KKT条件 ...

  5. linux 常用命令大全

    linux 常用命令大全 系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统 ...

  6. Google Chrome: Make the Bookmarks Bar Display as Icons Only

    By reducing your bookmarks to show only the icons, you can access more of them from the Bookmarks ba ...

  7. 利用Docker Hub上的Nginx部署Web应用

    Docker Hub上提供了很多镜像,如Nginx,我们不需要自己从ubuntu开始装Nginx再做发布,只需要先下载镜像到本地 docker pull nginx 在/opt下新建文件夹API,将需 ...

  8. Try..Finally..相信自己的眼睛

    问题提出 try { return x; } finally { x = null; } 上面这段代码到底怎么执行的? try..catch..finally 介绍 在MSDN中,try..catch ...

  9. Color颜色对照表

    Color.AliceBlue 240,248,255 Color.LightSalmon 255,160,122 Color.AntiqueWhite 250,235,215 Color.Light ...

  10. [stm32] 中断

    #include "stm32f10x.h" #include "stm32f10x_tim.h" #include "misc.h" #i ...