码迷,mamicode.com
首页 > Web开发 > 详细

css样式支持左右滑动要点

时间:2018-11-13 20:28:46      阅读:836      评论:0      收藏:0      [点我收藏+]

标签:idt   lin   pac   prope   button   array   ali   absolute   lock   

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

滚动设置:

 1 $(".mini-docker-right-array").click(function(event){
 2             var p =  $(this).parent().parent();
 3             var appToScroll = p.find(".app-to-scroll");
 4             var ul = p.find(".node-scroll-container");
 5             var ulLeft = parseInt(ul.css("left"));
 6             var left = ulLeft;
 7             if(ul.width() + ul.position().left > appToScroll.width()){
 8                 left = ulLeft - appToScroll.width();
 9             }
10             ul.animate({
11                 "left": left + "px"
12             });
13             event.stopPropagation();
14         })
15         
16         $(".imagebutton-left-botton").click(function(event){
17             var p =  $(this).parent().parent();
18             var appToScroll = p.find(".app-to-scroll");
19             var ul = p.find(".node-scroll-container");
20             var ulLeft = parseInt(ul.css("left"));
21             var left = ulLeft = appToScroll.width();
22             if(left > 0){
23                 left = 0;
24             }
25             ul.animate({
26                 "left": left + "px"
27             });
28             event.stopPropagation();
29         })

 

css样式支持左右滑动要点

标签:idt   lin   pac   prope   button   array   ali   absolute   lock   

原文地址:https://www.cnblogs.com/sxtg/p/9950565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!