知識點:
原生js一般都會將物件封裝在window物件原型中, 而jquery也可以將物件封裝在$中
js檔案:
(function
($, win, doc)
/*********
* $.extend
* 有三種呼叫方法
* 1.淺複製 $.extend(obj1, obj2) ===> obj1 成為obj2 的淺拷貝
* 2.深複製 $.extend(true, obj1, obj2) ==> obj1 深拷貝 obj2
* 3.為 $ 新增原型物件 $.extend() 之後可以通過 $.someobj 呼叫
* *
*/$.extend(scrollbar.prototype,
*/_init: function
(opts) ;
$.extend(true, self.opts, opts || {}); //深拷貝
self._initdomevent();
return self;
},/******
* 初始化do操作
* @method _initdomevent
* @return
*/_initdomevent: function
() ,
/***
* 初始化滑塊拖動功能
* @return [this]
* */
_initsliderdragevent: function
() slider.on('mousedown', function
(e) );
});}
return self;
},//初始化標籤的功能
_inittabevent: function
() )
return self;
},//初始化文章高度, 解決最後一篇文章的定位問題
_initarticleheight: function
() return self;
},//繫結內容滾動事件
_bindcontscroll: function
() });
return self;
},//繫結滾輪事件
_bindmousewheel: function
() )
},//獲取目標錨點的位置
getanchorposition: function
(index) ,
//獲取內容可滾動高度
getmaxscrollposition: function
() ,
//滑塊可移動距離
getmaxsliderposition: function
() ,
//計算滑塊兒的當前位置
getsliderposition: function
() ,
//獲取每個錨點的位置資訊陣列
getallanchorposition: function
() return allpositionarr;
},//控制內容滾動
scrollto: function
(psval) else }}
//錨點數與標籤數相同
if (posarr.length == self.$tabitem.length)
self.$cont.scrolltop(psval);
/*****
* scrolltop()是jq的函式,
* 無引數 : 用來獲取超出頂部的寬度
* 有引數 : 設定超出頂部的高度
* ****/
},//切換標籤的選中
changetabselector: function
(index) ,
});$.extend(
})})(jquery, window, document);
body,
ul,li,
h3,p
body
.scroll-demo
.scroll-list
.scroll-list
.scroll-item
.item-active
.clearfix
.scroll-wrap
.scroll-wrap
.scroll-content
.scroll-content
h3.scroll-content
.content
p.scroll-bar
.scroll-bar
.slide-bar
.scroll-bar
.slide-bar
:hover
自定義滾動條
滾動條從外觀來看是由兩部分組成 1.滑塊 可以滑動的部分 2.軌道 即滑塊的軌道，一般來說滑塊的顏色比軌道的顏色深。滾動條的css樣式主要有三部分組成 1 webkit scrollbar 定義了滾動條整體的樣式 可以改變滾動條的寬度 2 webkit scrollbar thumb 滑塊部分 可以...
自定義滾動條
body,div 2 某些樣式需ie5.5 才能支援 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2...
自定義滾動條
不主攻前端，最近因為工作原因做了幾個小樣例，已被以後用 樣例中用到的銀行就不上傳了 輸入框1 輸入框2 下拉選項 選項1選項2 選項3選項4 選項5選項6 選項7選項8 選項9 確認 按鈕樣式 global custom btn global custom btn hover 表單樣式 global...