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 检索或设置对 ...
随机推荐
- 什么时候使用“RCC_APBXPeriph_AFIO”
什么时候需要开启复用时钟: (1)使用EXTI (2)重映射(用到外设的重映射功能时才需要使能AFIO的时钟) 举例:重映射USART2 USART2的TX/RX在PA.2/3.但是,PA.2已经被T ...
- SpringAOP的xml实例、注解形式实例、概念理解 以及execution表达式实例与概念说明
(1)Spring AOP的简单应用: -->AOP:(Aspect Orinted Programming)面向切面编程,用于具有横切逻辑的场合,如:访问控制,事务管理,性能检测,由切入点和增 ...
- Date日期类型的绑定
自定义类型的绑定 springmvc没有提供默认的对日期类型的绑定,需要自定义日期类型的绑定 第一张图是po类中日期属性,第二张图是页面中日期属性的内容,第三张图片是访问出现400错误 因为日期的格式 ...
- Apache 配置多个端口多站点(Linux)
for apache2 configuration: by default, apache is configured 80 port for the default web site. follow ...
- transform:rotate3d/tranlate3d
transform:rotate3d(x,y,z,angle); rotate3d 代表 在3D空间,元素沿着 经过原点(0,0,0) 和 三维坐标(x,y,z) 2点的直线进行旋转.其中: x:是一 ...
- 分布式消息通信Kafka-原理分析
本文目标 TopicPartition 消息分发策略 消息消费原理 消息的存储策略 Partition 副本机制 1 关于 Topic 和 Partition 1.1 Topic 在 kafka 中, ...
- 漂亮数组 Beautiful Array
2019-04-06 16:09:56 问题描述: 问题求解: 本题还是挺有难度的,主要是要考虑好如何去进行构造. 首先考虑到2 * A[i] = A[j] + A[k],那么j,k就必须是同奇同偶, ...
- Python自学:第三章 倒着打印列表
# -*- coding: GBK -*- #reverse: 相反的 cars = ["bmw", "audi", "toyota", & ...
- angular 引入编辑器遇到的各种问题。。。
1.项目中找不到angular-cli.json,也找不到angular.json 2. 3.
- Jan.07
Jan.07 英文朗读 be good for对...好 be bad for/be harmful to对..不利. Smoking is not good for your health. 吸烟对 ...