滑動條控制頁面內容

2021-08-04 12:36:41 字數 1214 閱讀 3637

1、與之前所做的拖拽原理相似,只不過去掉了y方向的拖動。

2、在關於滑塊在滑動條的位置確定時一定要記得不要被樣式居中給迷惑了位置,

if (l<

0) else

if (l>oparent.offsetwidth-odiv

.offsetwidth)

要按照正常的方式進行取值!!!

3、關於比例取值,要按照滑塊移動的距離和總長度進行比較

var scale=l/(oparent.offsetwidth-odiv.offsetwidth);

4、為了保證頁面美觀,將空白處減去即可,還有頁面根據比例移動的方向是負值時,才能達到滑動條控制頁面內容的效果:

odiv3.style.top=-scale*(odiv3.offsetheight-odiv2.offsetheight)+』px』;

lang="en">

charset="utf-8">

滑動條控制頁面內容title>

#parent

#div1

#div2

#div3

style>

window.onload=function

() else

if (l>oparent.offsetwidth-odiv.offsetwidth)

odiv.style.left = l+'px';

var scale=l/(oparent.offsetwidth-odiv.offsetwidth);

document.title=scale;

odiv3.style.top=-scale*(odiv3.offsetheight-odiv2.offsetheight)+'px';

};document.onmouseup=function

() ;

return

false;

};};

script>

head>

id="parent">

id="div1">

div>

div>

id="div2">

(1)全國97個縣市最高氣溫達到或超過40℃,江浙滬地區尤為明顯

div>

div>

body>

html>

滑動條控制(Slider Control)

所有的控制項的建立基本都是同一套道路 第一步 h中建立乙個csliderctrl 類的物件 csliderctrl m ctrlslider 第二步 cpp中的void cmydlg dodataexchange cdataexchange pdx 函式進行初始化控制項 初始化控制項 void cm...

滑動條控制(Slider Control)

所有的控制項的建立基本都是同一套道路 第一步 h中建立乙個csliderctrl 類的物件 csliderctrl m ctrlslider 第二步 cpp中的void cmydlg dodataexchange cdataexchange pdx 函式進行初始化控制項 初始化控制項 void cm...

滑動條的風格控制

閃吧控制滾動條顏色的css屬性說明 css屬性屬性說明 scrollbar 3dlight color滾動條亮邊框顏色 scrollbar arrow color滾動條方向箭頭的顏色 scrollbar darkshadow color滾動條下邊和右邊的邊沿顏色 scrollbar face col...