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样式支持左右滑动要点的更多相关文章

  1. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  2. IE6支持min-width、max-width CSS样式属性

    1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...

  3. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  4. IE6支持兼容max-height、min-height CSS样式

    1.IE6支持max-height解决方法   -   TOP IE6支持最大高度解决CSS代码: .yangshi{max-height:1000px;_height:expression((doc ...

  5. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  6. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  7. flickity:支持触摸滑动,响应迅速的幻灯片轮播插件

    简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...

  8. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  9. CSS样式表(三)

    前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...

随机推荐

  1. 剑指offer 06:旋转数组的最小数字

    题目描述把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...

  2. java 反射得到属性与属性值

    反射可以破坏所有的封装性,比如这次通过反射得到的属性与属性值: /** * 得到属性值 * @param obj */ public static void readAttributeValue(Ob ...

  3. T57274 黑暗城堡

    传送门 思路: 先求出各个点到 1 的最短路径.分别用两个数组将最短路径记录下来(一个要用来排序).按排序后的 dis 值从小到大枚举各点加入树有多少种方案,最后根据乘法原理把各个点的方案数乘起来就是 ...

  4. CMD命令:不是内部或者外部命令也不是可运行的程序或批处理文件

    [本文转自:https://blog.csdn.net/l_mloveforever/article/details/79513681] 前言:   相信有很多小伙伴都比较喜欢使用Command命令来 ...

  5. android -------- RecyclerView的可(多个Item水平,垂直)滚动列表的实现

    RecyclerView的可滚动的列表实现,视图相邻的视图在屏幕上部分或完全可见(水平3个item,第一个和第三个显示一部分,第二个完全显示) 效果如图: 基于RecyclerView完成的(自定义控 ...

  6. random froest 调参

    https://blog.csdn.net/wf592523813/article/details/86382037 https://blog.csdn.net/xiayto/article/deta ...

  7. 记录下用axios遇到的问题

    这两天用axios做页面登录.遇到了N多问题,.首先是报Response to preflight request doesn't pass access control check: No 'Acc ...

  8. leetcode-979-树

    https://leetcode.com/problems/distribute-coins-in-binary-tree/ n个硬币随机分布在n个点上,要求每个点都拥有一个硬币,问最小的花费. 对每 ...

  9. text——文本属性大全

    一.文字颜色(color:red;) <style> body {color:red} h1 {color:greenyellow} p.color {color:blue} </s ...

  10. 笔记《JavaScript 权威指南》(第6版) 分条知识点概要3—表达式和运算符

    [表达式和运算符]原始表达式,初始化表达式(对象和数组的),函数定义表达式,属性访问表达式,调用表达式,对象创建表达式,运算符概述,算术表达式,关系表达式,逻辑表达式,赋值表达式,表达式计算,其他运算 ...