<!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. HTML之表单元素

    A.表单元素都是放在<form></form>标签内的.来看看表单的属性  属性 值 描述 accept MIME_type 规定通过文件上传来提交的文件的类型 accept- ...

  2. MySQL日期时间函数大全（转）

    MySQL日期时间函数大全 DAYOFWEEK(date)  返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准)mysql> select DAYOFWEEK('1 ...

  3. CCF 201409-2 画图 (暴力)

    问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y2)的矩形指将横坐标范围从x1到x2,纵坐标范围从y1到y2之间的区域涂上颜色. 下图给出了一个画了两个矩形的例子.第一个矩形是 ...

  4. [Leetcode][JAVA] Valid Palindrome

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  5. 4.2.1 网络请求之HTTP

    HTTP请求&响应:(常用的只有Post与Get,还有Head/put/delete/connect/options/trace) Get&Post(建议用post规范参数传递方式,并 ...

  6. 6.4 APK包限制

    Google 2015年 9月28日公告:为了Android开发商可以制作出更加复杂的app和游戏,Google Play游戏包体(APK)大小由原来的50MB提高到100MB.但是针对Android ...

  7. maven异常

    1.There are test failures pom中加入: <build> <plugins> <plugin> <groupId>org.ap ...

  8. testng.xml顺序执行多个case配置

    testng.xml顺序执行多个case配置 项目结构如图:

  9. CentOS6.5下Tomcat7 Nginx Redis配置步骤

    所有配置均在一台机器上完成,部署拓扑信息如下: 注意:由于Redis配置对jar包和tomcat版本比较严格,请务必使用tomcat7和本文中提供的jar包.下载地址: http://pan.baid ...

  10. vpn与局域网冲突解决方案

    打开vpn后,所有通过网卡发出去的包都会走vpn,而不会走局域网,所以局域网无法访问,vpn为本机指定路由,让网卡把包发给vpn线路(比如10网段).如果为本机指定到达局域网的路由,访问局域网的包就知 ...