1. 程式人生 > >css樣式支援左右滑動要點

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

滾動設定:

 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 })