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. 论文笔记:Learning Attribute-Specific Representations for Visual Tracking

    Learning Attribute-Specific Representations for Visual Tracking AAAI-2019 Paper:http://faculty.ucmer ...

  2. 《内蒙古自治区第十三届大学生程序设计竞赛试题_H 公孙玉龙》

    这个题有点小坑,最坑的地方就是  输入的b 变量  有可能 是  负数  !   负数 !  负数!    对 ,你没有看错,就是负数,坑死我了, 一直都是  content.charAt(0) 判断 ...

  3. numpy计算结果的保存——ndarray格式数据保存

    1 Python保存numpy数据: numpy.savetxt("result.txt", numpy_data) 2 保存list数据: file = open('data.t ...

  4. UVALive - 3942 (字典树)

    递推:$d(i) $表示从第$i$个字符开始到末尾的字符串(即后缀S[i...n])的分解方案数,则$d(i) = \sum {d(i + len(x))} $,其中字符串$x$代表S[i...n]的 ...

  5. 实现一个类似 http-server 的静态服务 一一 ks-server

    最近没事,学习了一下 node,觉得 http-server 这个静态服务很神奇,突发奇想,自己也来实现这么一个静态服务试试.我暂且起名为 static-server. 1. 初始化项目: cd my ...

  6. Win10提示“因为文件共享不安全,所以你不能连接到文件共享”如何处理

    在使用Windows10 1803版本系统连接CentOS6.5下搭建的Samba服务时,发现打开共享文件会遇到以下提示: 其实,该问题是Win10版本不兼容导致的.微软官方说明:https://go ...

  7. 如何解决WebBrowser.DocumentCompleted事件的多次调用

    转载:https://www.cnblogs.com/rchlz/archive/2009/02/27/1399274.html 关于DocumentCompleted事件,MSDN给出的解释是在文档 ...

  8. ExtJs写本地ArrayStore,ComboBox调用

    1.自定义本地ArrayStore var sCurStore = new Ext.data.ArrayStore({ //设备状态store fields: ["ckey", & ...

  9. vue_全局注册过滤器

    在一个项目中, 某些过滤器全局都有可能用的到, 统一管理并自动化全局注册是很方便的. 代码如下, 后续只需要在src/filters/index.js中添加方法就可以全局使用过滤器了. // src/ ...

  10. vue keep-alive 取消某个页面缓存问题

    keep-alive keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素 <keep-aliv ...