時間軸(自定義)

2022-05-05 13:48:09 字數 1403 閱讀 2966

先上效果圖:

專案中要求做成上面的效果,在swiper官網找了一下找到類似的,但是起始位置在中間,沒辦法,只能自己動手借用swiper的css(剛開始用swiper寫的,有些樣式懶得改。。。)做出自己想要的效果(細節方面沒做好不要介意,手動捂臉!)

html:

css:

.swiper-container

/* width: 100%; */

left: 0;

/* float: left; */

/* white-space:nowrap; */

padding-left: 36px;

/* border:1px red solid; */

}.swiper-slide

.swiper-slide:last-child

.swiper-slide span

.swiper-slide p

.swiper-slide i

.orange

.orange span

js:

var data = ['10.01','10.02','10.03','10.04','10.05','10.06','10.07','10.08','10.09','10.10','10.11','10.12','10.13','10.14','10.15','10.16','10.17','10.18']

var data1 = ['1條','2條','3條','4條','5條','6條','7條','8條','9條','10條','11條','12條','13條','14條','15條','16條','17條','18條']

var num = 0

var swiperslide = document.getelementsbyclassname('swiper-slide');

$(function()

var a = $('.swiper-slide').width(); //單個元素的寬度(每次移動的距離)

var abs = math.floor(lefts/a/2); //時間軸元素要顯示的個數20,從第二十的一半開始移動

var i = 0

function time();

if(num=abs&&num=swiperslide.length-abs&&numswiperslide.length-1)

num++;

}time()

setinterval(time,1000)

}())

自定義封裝時間軸縱向滾動

時間軸滾動以前沒寫過,今天寫著玩,只實現了滑鼠縱向滑動時間軸的效果,暫時沒做三列聯動效果 效果圖如下 具體實現的 如下 container column scroll scroll li select function this.config.container document.getelemen...

mysql 時間軸 使用MySQL計算時間軸的變化

我是mysql的新手,我需要你的幫助.我有一張包含類似資料的 robotposx robotposy robotposdir robotshortestpath 0.1 0.2 15 1456 0.2 0.3 30 1456 0.54 0.67 15 1456 0.68 0.98 22 1234 0...

時間軸運動

截了一小段gif效果圖,如下 js 如下 function win,console.log timewdarr 計算時間差 var timediff function time1,time2 獲取時間段,並存入陣列 timedata.each function index,el console.lo...