時間軸滾動以前沒寫過,今天寫著玩,只實現了滑鼠縱向滑動時間軸的效果,暫時沒做三列聯動效果
效果圖如下:
具體實現的**如下:
#container
.column
.scroll
.scroll li
#select
;(function () ;
this.config.container = document.getelementbyid(container);
this.config.column = this.config.container.getelementsbyclassname(column);
this.setdatelists();
this.config.scroll = this.config.container.getelementsbyclassname(scroll);
this.setscrollevent(); }
datescroll.prototype = ,
setselectlists: function (column,num)
} else
}var ul = document.createelement('ul');
ul.classname = "scroll";
ul.innerhtml = htmlstr;
var domhtml = document.createdocumentfragment();
},setscrollevent: function ()
document.onmouseup = function ()
return false;}}
} }window.datescroll = datescroll;
})()
呼叫方法:
var datescroll = new datescroll('container','column','scroll');
時間軸(自定義)
先上效果圖 專案中要求做成上面的效果,在swiper官網找了一下找到類似的,但是起始位置在中間,沒辦法,只能自己動手借用swiper的css 剛開始用swiper寫的,有些樣式懶得改。做出自己想要的效果 細節方面沒做好不要介意,手動捂臉!html css swiper container width...
自定義滾動軸
webkit 這個是谷歌瀏覽器的字首,自定義滾動軸只有谷歌瀏覽器支援。webkit scrollbar 滾動軸整體 webkit scrollbar thumb 滑塊 webkit scrollbar track 滑動軌道 webkit scrollbar button 兩端按鈕 webkit sc...
jquery封裝的時間軸
概述 很多時候,都會用到類似於時間軸的東西,鑑於網路資源沒有那麼順手,就想著自己搞乙個,在此將原始碼貼出來。效果 樣式檔案style.css timeline timeline ul.ulvec timeline ul li.livec timeline ul.ulhor timeline ul l...