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. ejs常用功能函数

    利用<%- include filename %>加载其他页面模版: 1.缓存功能,能够缓存已经解析好的html模版: 2.<% code %>用于执行其中javascript ...

  2. Docker介绍及使用

    什么是容器? 容器就是在隔离的环境运行的一个进程,如果进程停止,容器就会销毁.隔离的环境拥有自己的系统文件,ip地址,主机名等,kvm虚拟机,linux,系统文件 程序:代码,命令 进程:正在运行的程 ...

  3. krpano生成全景图

    1.下载krpano工具 第一次我下载的有水印,但是第二次下载的便没了,原因我也不清楚.下载好后不要急着打开.exe程序 2.生成全景图 将全景图拖入MAKE VTUOR (NORMAL) DROPL ...

  4. js三元表达式

    条件 ? true的时候执行 : false时候执行 const x = 20; let answer; if (x > 10) { answer = 'greater than 10'; } ...

  5. shell for 循环

    test.sh #!/bin/bash for str in "C语言" "http://www.bilibili.com" "成立7年了" ...

  6. C#实现基于ffmpeg加虹软的人脸识别demo及开发分享

    对开发库的C#封装,屏蔽使用细节,可以快速安全的调用人脸识别相关API.具体见github地址.新增对.NET Core的支持,在Linux(Ubuntu下)测试通过.具体的使用例子和Demo详解,参 ...

  7. 安装卡巴 OFFICE链接 出现这个过程被中断,由于本机的限制

    今天 安装了卡巴后 office 超链接功能不能使用了,一点击超链接,就会发出警报,说”由于本机的限制,此操作已被取消,请与系统管理员联系“ 解决办法:1打开注册表2到这个位置:HKEY_CURREN ...

  8. 20175317 《Java程序设计》第九周学习总结

    20175317 <Java程序设计>第九周学习总结 学前准备 首先下载XAMPP,下载完成后打开: 将前两个选项打开 在IDEA中配置驱动mysql-connector-java-5.1 ...

  9. 新工具DPR的一些想法

    可行性分析 假设: 连续性 - 与clustering的假设正好相反 分支事件 特征的选择:距离的度量: 限定KNN的必要性: MST构建: 主支的构建和简化:省略中间点:最短路径: 迭代处理所有分支 ...

  10. 关于Oracle单行函数的讲解

    单行函数:对单个数值进行操作,并返回一个值. 分类:1.字符函数    1)concat(a,b) 拼接a,b两个字符串数据    2)initcap(x) 将每个单词x首字母大写     3)low ...