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. react生命周期和组件生命周期

    React的组件在第一次挂在的时候首先获取父组件传递的props,接着获取初始的state值,接着经历挂载阶段的三个生命周期函数,也就是ComponentWillMount,render,Compon ...

  2. 编码原则 之 Stable Dependencies

    The Stable Dependencies Principle states that “The dependencies between software packages should be ...

  3. error——Fusion log——Debugging Assembly Loading Failures

    原文 So...you're seeing a FileNotFoundException, FileLoadException, BadImageFormatException or you sus ...

  4. LeetCode 05 最长回文子串

    题目 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab" 注意: ...

  5. ArcGIS Pro开发Web3D应用(4)——Portal发布三维没有“发布”选项解决

    如题,将三维场景包.slpk上传并发布,未看到发布选项. 问题核心就在于环境没配置好,主要有2点: 1.验证联合托管状态 需要将托管服务器与Portal进行联合,并进行验证,此情况需要在WebAdap ...

  6. CSS之垂直水平居中方法

    //居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...

  7. Rancher2.0与DataDog集成部署

    目录 一.简要介绍 二.注意事项 三.部署过程 四.运行截图 五.参考链接 一.简要介绍: 看了Rancher中文官网上的一篇关于DataDog部署的文章,自己尝试了一下,没有成功,主要是自己对Dat ...

  8. BP neural network optimized by PSO algorithm on Ammunition storage reliability prediction 阅读笔记

    1.BP neural network optimized by PSO algorithm on Ammunition storage reliability prediction 文献简介文献来源 ...

  9. 记录下curl的使用方法

    curl是一个可以在命令行中直接发起请求的工具,基础用法如下: curl localhost:6767/1.html //返回url对应的页面内容 curl localhost:6767/1.html ...

  10. 【IDEA填坑】xml不编译

    今天在maven编译Springboot项目的时候,发现src/main/resources下的配置文件编译失败(就是war包中没有放入xml配置文件导致程序启动失败),经查询资料,发现新版本的IDE ...