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 ...
随机推荐
- Java 关键字、标识符、注释、常量与变量、数据类型，算术、赋值、比较、逻辑、位、三元运算符和流程控制、break、continue【3】
若有不正之处,请多多谅解并欢迎批评指正,不甚感激.请尊重作者劳动成果: 本文原创作者:pipi-changing本文原创出处:http://www.cnblogs.com/pipi-changing/ ...
- IIS7.5支持html页面包含（include)html页面
前提条件: ServerSideIncludeModule的安装: 在安装iis的时候选择上该服务(“在服务端包含文件”,选项)即可,如下: 1:处理映射程序 添加模块映射 请求路径 *.html 模 ...
- Python3学习(2)-中级篇
Python3学习(1)-基础篇 Python3学习(2)-中级篇 Python3学习(3)-高级篇 切片:取数组.元组中的部分元素 L=['Jack','Mick','Leon','Jane','A ...
- 「zigbee - 1」工欲善其事必先利其器 - IAR for 8051 IDE customization
最近在实验室做一些 Zigbee 相关的事情,然而一直没在博客上记录啥东西,也不像原来在公司有动力在 Confluence wiki 上扯东扯西.直到前些阵子,跑到 feibit 论坛上(国内较大的一 ...
- Cocos2d-x Application Wizard for Visual Studio User Guide
0. Overview Cocos2d-x-win32's project can be generated by Wizard. Wizard supports Visual Studio 2008 ...
- inotify 心得
inotify 心得 一.inotify简介 inotify是Linux内核2.6.13 (June 18, 2005)版本新增的一个子系统(API),它提供了一种监控文件系统(基于inode的)事件 ...
- C# ADO.NET SqlDataAdapter中传递参数
ADO.NET的SQL语句中,往往不是静态的语句,而是需要接受传递过来的参数,比如典型的登录功能,需要查找指定的用户名: string sqlQuery = "SELECT * FROM W ...
- ARCGIS FOR JAVASCRIPT API 出现multipleDefine问题
问题: Error {src: "dojoLoader", info: Object, stack: (...), message: "multipleDefine&qu ...
- ConcurrentDictionary 对决 Dictionary+Locking
在 .NET 4.0 之前,如果我们需要在多线程环境下使用 Dictionary 类,除了自己实现线程同步来保证线程安全之外,我们没有其他选择. 很多开发人员肯定都实现过类似的线程安全方案,可能是通过 ...
- Linux下通过NFS共享文件夹
测试环境:CentOS 6.7 服务端 # yum -y install nfs-utils rpcbind # 开启服务 service nfs start service rpcbind star ...