<!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. 马踏飞燕——奔跑在Docker上的Spark

    目录 为什么要在Docker上搭建Spark集群 网络拓扑 Docker安装及配置 ssh安装及配置 基础环境安装 Zookeeper安装及配置 Hadoop安装及配置 Spark安装及配置 集群部署 ...

  2. C# 正则表达式测试工具与分享窗体自适应类

    放假刚回来,自己打算写一个正则表达式的测试工具,因为上次在网上用的一个在线正则表示测试工具就 没有很好的服务自己的,所以才有了现在的想法,想写一个C#开发者用的正则表达式测试工具!期间由于最大化时控件 ...

  3. javascript之观码说理

    前一阶段看到大神在网上贴出的测试个人js理解的代码. 在此我在此借用大神的代码,进行自我复述,大神文章参见:http://www.imooc.com/article/1731 代码1: functio ...

  4. css伪类运用

    <!doctype html><html><head><meta charset="utf-8"><title>CSS输 ...

  5. java基础-jdbc——三种方式加载驱动建立连接

    String url = "jdbc:mysql://localhost:3306/student?Unicode=true&characterEncoding=utf-8" ...

  6. C2第五次作业解题报告

    看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...

  7. pm2使用介绍

    https://segmentfault.com/a/1190000002539204

  8. 基于python的堡垒机

    一 堡垒机的架构 堡垒机的核心架构通常如下图所示: 二.堡垒机的一般执行流程 管理员为用户在服务器上创建账号(将公钥放置服务器,或者使用用户名密码) 用户登陆堡垒机,输入堡垒机用户名密码,显示当前用户 ...

  9. [转]15年双11手淘前端技术巡演 - H5性能最佳实践

    [原文地址]:https://github.com/amfe/article/issues/21 前言 2015年是全面『无线化』的一年,在BAT(财报)几家公司都已经超过50%的流量来自移动端,这次 ...

  10. 跟我一起学WCF(7)——WCF数据契约与序列化详解

    一.引言 在前面博文介绍到,WCF的契约包括操作契约.数据契约.消息契约和错误契约,前面一篇博文已经结束了操作契约的介绍,接下来自然就是介绍数据契约了.所以本文要分享的内容就是数据契约. 二.数据契约 ...