css样式支持左右滑动要点
div 包含 ul ,ul 包含 li
div宽度固定,ul 宽度随着li的可以无限增加,li 左右滑动的最小容器。
div 样式position:relative;width:xxpx;height:xxpx;
ul 样式 list-style: none; white-space: nowrap;position: absolute; top: 0; left: 0;margin: 0px; padding: 0px;
li 样式 display: inline-block; vertical-align: top;list-style: none;white-space: nowrap;
li元素水平有间隙,需要在其父元素上加配置:font-size:0
滚动设置:
$(".mini-docker-right-array").click(function(event){
var p = $(this).parent().parent();
var appToScroll = p.find(".app-to-scroll");
var ul = p.find(".node-scroll-container");
var ulLeft = parseInt(ul.css("left"));
var left = ulLeft;
if(ul.width() + ul.position().left > appToScroll.width()){
left = ulLeft - appToScroll.width();
}
ul.animate({
"left": left + "px"
});
event.stopPropagation();
})
$(".imagebutton-left-botton").click(function(event){
var p = $(this).parent().parent();
var appToScroll = p.find(".app-to-scroll");
var ul = p.find(".node-scroll-container");
var ulLeft = parseInt(ul.css("left"));
var left = ulLeft = appToScroll.width();
if(left > 0){
left = 0;
}
ul.animate({
"left": left + "px"
});
event.stopPropagation();
})
css样式支持左右滑动要点的更多相关文章
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- IE6支持min-width、max-width CSS样式属性
1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- IE6支持兼容max-height、min-height CSS样式
1.IE6支持max-height解决方法 - TOP IE6支持最大高度解决CSS代码: .yangshi{max-height:1000px;_height:expression((doc ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- flickity:支持触摸滑动,响应迅速的幻灯片轮播插件
简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- CSS样式表(三)
前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...
随机推荐
- P2495 [SDOI2011]消耗战
思路 虚树上DP 虚树相当于一颗包含了所有询问的关键点信息的树,包含的所有点只有询问点和它们的LCA,所以点数是\(2k\)级别的,这样的话复杂度就是\(O(\sum k)\),复杂度就对了 虚树重点 ...
- POJ1848--Tree ——树形dp
题意:给你一个树,问你最少连几条边可以让树中的每一个节点在且只在一个环内.如果无法完成就输出-1. 我们设dp[i][0]为根节点为i的树变成每一个节点都在且只在一个环里所需要的最小边数.dp[i][ ...
- Qt对象树
Qt提供了一种机制,能够自动.有效的组织和管理继承自QObject的Qt对象,这种机制就是对象树.子对象动态分配空间不需要释放.
- linux中查找(find、locate、which、whereis、grep)命令汇总、帮助命令(man、whatis、apropos、info、help)汇总
(一)find命令详解 find:功能:文件搜索: 语法:find[搜索范围][匹配条件]: 只要匹配条件完全符合才可以被显示,使用通配符*匹配条件*则可以显示匹配条件的所有目录,问号?匹配单个字符 ...
- OS X EI Captain 下解决 There was a problem confirming the ssl certificate 问题
参考: Problem Confirming the SSL Certificate - OSX OS X EI Captain 下解决 There was a problem confirming ...
- Springboot的异常处理与自定义异常
园友们好,元旦很快就到来了,提前祝各位园友们元旦快乐,今天给大家分享一个工作中必用一个知识点,就是使用枚举构建自定义异常并应用于springboot的异常处理器.开始之前我先把这个案例的结构大致说明一 ...
- Springboot中Jackson的操作
有一段时间没写博客了,虽然是菜鸟一枚但毕竟总要有东西记录学习的,我相信有志者事竟成.今天在工作中使用Jackson转换了一个javabean,传到测试服上之后发现日期少了一天,使用的是@JsonFor ...
- Java核心知识盘点(三)- 框架篇-Spring
Spring的两大核心特性:IOC.AOP IOC:控制反转.依赖注入,它并不是一种技术实现,而是一种思想.把一些相互依赖对象的创建.协调工作交给Spring容器来管理,每个对象只需要关注其自身的业务 ...
- 承接VR外包,虚拟现实外包,北京正规公司
我们制作各类型VR全景虚拟现实,增强现实视频制作.录制等项目.品质保证,售后完备,可签合同.contectus: 13911652504(技术经理tommy) 承揽VR外包 虚拟现实外包 U3D外包( ...
- SSH应用实战——安全防护(fail2ban)
ssh 安全配置 端口 ssh随机端口范围在 27000-30000,可以手动修改也要改在这个范围内,建议定时修改端口. 密码 登陆密码应包含大小写.数字.特殊字符等 10 位以上,建议定期修改密码. ...