<!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. Ubuntu12.04配置mod_python

    安装: sudo apt-get install libapache2-mod-python python-mysqldb 然后编辑配置文件/etc/apache2/sites-enabled/000 ...

  2. 利用RBAC模型实现一个通用的权限管理系统

    本文主要描述一个通用的权限系统实现思路与过程.也是对此次制作权限管理模块的总结. 制作此系统的初衷是为了让这个权限系统得以“通用”.就是生产一个web系统通过调用这个权限系统(生成的dll文件), 就 ...

  3. [fn]焦点图JQ插件版

    自己写的焦点图片的插件,使用方法简单说明一下 index.html页面具体结构如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  4. C#开发中使用Npoi操作excel实例代码

    C#开发中使用Npoi操作excel实例代码 出处:西西整理 作者:西西 日期:2012/11/16 9:35:50 [大 中 小] 评论: 0 | 我要发表看法 Npoi 是什么? 1.整个Exce ...

  5. iOS 用代码搭建UI界面实例

    1.背景 学习IOS开发也差不多两个月了,赶鸭子上架的学习模式让我学习比较快,但是真心很累,每天有每天的工作进度,在学习的 时候需要边做一个项目真心有点累,但是看到自己的收获还是值得的.自己原来是做C ...

  6. Linux下paste命令

    paste 用于将多个文件按照列队列进行合并. 该命令主要用来将多个文件的内容合并,与cut命令完成的功能刚好相反. 1.原文件: 1>a.txt [root@localhost home]# ...

  7. 使用java 程序创建格式为utf-8文件的方法(写入和读取json文件)

    使用java 程序创建格式为utf-8文件的方法:  try{            File file=new   File("C:/11.jsp");              ...

  8. [Orchard] 通过指定RouteData设置Pager的链接地址

    Orchard 中的Pager是一个很方便的用来分页的Shape, 但默认情况下,它是使用当前Action的地址作为链接地址,如果分页的数据要是由别的Action提供时,这样的分页链接就不对了,其实它 ...

  9. Zynga 开源其服务器性能监控分析工具 zPerfmon

    流年不利的社交游戏服务商Zynga近日在官方博客宣布开源zPerfmon——该工具负责监控Zynga数以千计的社交游戏服务器.zPerfmon的源代码目前已经上传至Github. 包括Facebook ...

  10. SQL Server 处理树结构数据的一个示例

    没多少技术含量,在简单的系统里应用问题不大: 解决的问题是: 1.树结构数据的表设计: 2.对任意一个节点,找到他所有的上级节点 3.对任意一个节点,找到他所有的下级节点 这里的部分SQL是同事给的, ...