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 检索或设置对 ...
随机推荐
- FJNU Fang G and his Friends(状压DP)题解
Description 众所周知,fang G 有很多小伙伴,有一天,Fang G 打算带他们去玩有趣的游戏OOXX,这个游戏需要分成两组,有趣的是,每个人互相之间都有一个满意度,大家都想和自 ...
- Visual Studio 2019 double clicking project(custom behavior)
Issue
- wireshark基础学习—第二部分wireshark的基础操作
抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接口.点击Capture Opti ...
- 基于Ocelot的gRpcHttp网关
什么是gRpcHttp网关 通俗的讲就是将gRpc提供的服务以rest api的形式提供出去,不需要再单独的写一个webapi去做这件事. gRpcHttp网关好处 减少不必要代码,减少中间层提高通讯 ...
- vim中文乱码问题
问题如下: 修改 /etc/vimrc 文件 添加: ,ucs-bom,gb18030,gbk,gb2312,cp936 把/etc/vimrc复制到你自己的根目录下面:复制为.vimrc(前面有个点 ...
- 【GO】【gdb】
1 安装homebrew 参考 https://www.cnblogs.com/suren2017/p/9249803.html ([Ruby][环境搭建]macOS Sierra 10.12.6 + ...
- heartbeat 非联网安装(通过配置本地yum文件库安装heartbeat)
软件环境:centos6.5 一.下载rpm包 首先找一台联网的centos6.5机器 安装epel扩展源: yum install -y epel-release 安装yum-plugin-down ...
- syncbackse操作
有4类操作,包括同步,备份,镜像和组 同步是前文件夹内和后文件夹内的文件同步,使得二者的所有文件保持一致,但是也可以修改不同类型文件的覆盖操作,如果左侧有文件123.txt,右侧无123.txt文件, ...
- springboot killed springboot 无故停止运行解决办法
测试环境的服务部署在阿里云服务器上,运行一段时间总是自动宕掉,在配置文件里加上内存溢出配置,也不能打印出相关日志,一直找不出原因.今天在网上:http://www.cnblogs.com/chener ...
- firewall配置
词解释 在具体介绍zone之前学生先给大家介绍几个相关的名词,因为如果不理解这几个名词zone就无从入手. target:目标,这个前面学生也已经给大家介绍过了,可以理解为默认行为,有四个可选值:de ...