jquery scrollLeft居中
<!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居中的更多相关文章
- jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- jQuery scrollLeft()与scrollTop() 源码解读
这里的实现也很容易懂,通过jQuery的静态方法each给jQuery的原型添加scrollLeft和scrollTop方法. 这里在取值时它把window和普通的element做了区分 如果是win ...
- jquery层居中,点击小图查看大图,弹出层居中代码
1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目
function showLoad(tipInfo, type, autohide) { var pic = ""; switch (type) { case 0: // load ...
- jquery弹窗居中-类似alert()
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 使用jQuery对图片进行居中设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery常用代码集锦
1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({ ajaxSettings : { contentT ...
- jquery 点点滴滴小记
字符截取显示 var text = $(".content").text(); var textNum = text.length; var textInt = text.slic ...
- Jquery实用代码片段（转）
1.把所有带有#的空链接换成不友情的链接 $('a[href="#"]').each(function() { $(this).attr('href', 'javascript:v ...
随机推荐
- discuz数据库表
http://faq.comsenz.com/library/database/x3/x3_index.htm discuz数据库表字典 Discuz X3各数据库表用途 pre_common_ ...
- Longest Valid Parentheses 每每一看到自己的这段没通过的辛酸代码
Longest Valid Parentheses My Submissions Question Solution Total Accepted: 47520 Total Submissions: ...
- Python 2 —— 基本数据类型及其运算
基本运算 一.数字 **表示乘方运算 12 / 3 = 4.0浮点数 12 // 3 = 4整数 二.字符串 1.表示 单行:'...'或者"..." 多行:'''...'''或者 ...
- 弹出JS提示框
弹出JS提示框Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "<script> ...
- oracle 10g在redhat5下的安装
[root@localhost ~]# groupadd dba -g 111 [root@localhost ~]# groupadd oinstall -g 110 [root@localhost ...
- JSON与XML的区别
1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许 ...
- PHP类与继承
<?php class Person { private $name; private $age; function __construct($name,$age){ $this->nam ...
- 用SQLSERVER里的bcp命令或者bulkinsert命令也可以把dat文件导入数据表
用SQLSERVER里的bcp命令或者bulkinsert命令也可以把dat文件导入数据表 下面的内容的实验环境我是在SQLSERVER2005上面做的 之前在园子里看到两篇文章<C# 读取纯真 ...
- C++11 并发指南三(Lock 详解)
在 <C++11 并发指南三(std::mutex 详解)>一文中我们主要介绍了 C++11 标准中的互斥量(Mutex),并简单介绍了一下两种锁类型.本节将详细介绍一下 C++11 标准 ...
- maven 打包 xml文件
说起来手贱啊,搞了两个小时,就是因为打包的时候,maven无法把xml文件打包到正确的位置. 本来应该是打包到 com/presistence包下,结果打出来有两个包,一个是com/presisten ...