JS-自訂捲軸的幾個執行個體

JS-自訂捲軸的幾個執行個體

首先要說的就是：怎麼實現一個自訂的捲軸

主要步驟：

1. 定義兩個div，一大一小，讓小div在大div上滾動

2. 利用拖拽原理使小div可以滾動，這裡拖拽的時候，只是改變小div的left值；

3. 限制小div的滾動範圍

 

 

注意：別忘記定位position

 

<script>    window.onload = function () {        var oParent = document.getElementById('parent');        var oChild = document.getElementById('child');        var disX = 0;        oChild.onmousedown = function (ev) {            var ev = ev || window.event;            disX = ev.clientX - oChild.offsetLeft;            document.onmousemove = function (ev) {                var ev = ev || window.event;                // 限制小div拖動範圍                var L  = ev.clientX - disX;                if(L<0){ //因為小div是相對大div定位的，所以當拖到大div的最左邊的時候，小div的left就為0了                    L = 0;                }                if(L>oParent.offsetWidth - oChild.offsetWidth){                    // 大div的寬 減去 小div的寬 就是小div可以拖動的最大值                    L = oParent.offsetWidth - oChild.offsetWidth;                }                oChild.style.left = L +'px';            }            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            }        }    }</script>

到這裡一個自訂的捲軸就做好了，接下來用這個自訂的捲軸來控製做點東西，來用自訂的捲軸的滾動來改變div的大小

1. 定義一個div

 

 
2. 加點樣式

 

 #box{width: 0;height: 0;background: yellow;}

3. 然後再js裡定義一個滾動的比例

 

 var scale = 1/(oParent.offsetWidth - oChild.offsetWidth);

通過這個滾動的比例來改變div的大小。

完整js代碼：

 

<script>    window.onload = function () {        var oParent = document.getElementById('parent');        var oChild = document.getElementById('child');        var disX = 0;        oChild.onmousedown = function (ev) {            var ev = ev || window.event;            disX = ev.clientX - oChild.offsetLeft;            document.onmousemove = function (ev) {                var ev = ev || window.event;                var oBox = document.getElementById('box');                // 限制小div拖動範圍                var L  = ev.clientX - disX;                if(L<0){                    L = 0;                }                else if(L>oParent.offsetWidth - oChild.offsetWidth){                    L = oParent.offsetWidth - oChild.offsetWidth;                }                // 定義一個滾動的比例,因為L的大小是由上面的判斷語句決定的，所以scale需要定義在判斷語句下面，定義在上面會出問題                var scale = L/(oParent.offsetWidth - oChild.offsetWidth);                oChild.style.left = L +'px';                oBox.style.width = scale*300 +'px';                oBox.style.height = scale*300 +'px';            }            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            }            return false;        }    }</script>

注意：如果var scale = 1/(oParent.offsetWidth - oChild.offsetWidth) 下在判斷語句下面會出問題

 

當scale寫在判斷語句的上面。會發現當捲軸滾到最後邊的時候，繼續移動滑鼠scale一直在增加，導致div的寬高也會增加，所以注意，下面是正常效果

案例2： 通過自訂捲軸來改變div的透明度

將id為box的div樣式做下簡單修改

 

 #box{width: 300px;height: 300px;background: yellow;            opacity: 0;            filter:alpha(opacity:0);}

接著將上面js代碼中改變div寬高的代碼替換成改變透明度就ok了

 

oBox.style.opacity = scale; // 改變div的透明度oBox.style.filter = 'alpha(opacity:'+scale+')';

看下效果：

案例3 ： 自訂捲軸控制文字內容滾動，先看效果

定義一個id為content的div，實際上是通過控制這個div的top值來實現文字滾動的，所以需要給這個div添加絕對位置

 

 眾所周知JSHTMl元素的互動幾乎都是通過“事件”來完成的，事件從觸發到完成響應一般分為3個階段：捕獲階段，目標階段，和冒泡階段。 那麼事件是在捕獲階段響應 還是在冒泡階段響應那？？ 我們是可以手動設定事件是在捕獲階段響應還是在冒泡階段響應。 那麼事件是在捕獲階段響應 還是在冒泡階段響應那？？ 我們是可以手動設定事件是在捕獲階段響應還是在冒泡階段響應。 理解JS的事件流機制對充分理解JS的事件至關重要，那麼什麼是JS的事件流那？？ 可以理解為當事件發生時，響應事件的順序。這個順序就按照一個流進行的。這就是事件流。這個流是從裡向外流，還是從外向裡流那？？不同的瀏覽器事件流的流向不太一樣。 可以理解為當事件發生時，響應事件的順序。這個順序就按照一個流進行的。這就是事件流。這個流是從裡向外流，還是從外向裡流那？？不同的瀏覽器事件流的流向不太一樣。 例如IE採用的是 “事件冒泡流”(從裡向外流），自然響應事件的順序也是從裡向外的，事件冒泡流也是大部分瀏覽器採用的預設；而網景採用的是 “事件捕獲流”(從外向裡流) 事件冒泡流也是大部分瀏覽器採用的預設；而網景採用的是 “事件捕獲流”(從外向裡流)

<script>    window.onload = function () {        var oParent = document.getElementById('parent');        var oChild = document.getElementById('child');        var oBox = document.getElementById('box');        var oContent = document.getElementById('content');        var disX = 0;        oChild.onmousedown = function (ev) {            var ev = ev || window.event;            disX = ev.clientX - oChild.offsetLeft;            document.onmousemove = function (ev) {                var ev = ev || window.event;                var oBox = document.getElementById('box');                var L  = ev.clientX - disX;  // 限制小div拖動範圍                if(L<0){                    L = 0;                }                else if(L>oParent.offsetWidth - oChild.offsetWidth){                    L = oParent.offsetWidth - oChild.offsetWidth;                }                var scale = L/(oParent.offsetWidth - oChild.offsetWidth);// 定義一個滾動的比例                oChild.style.left = L +'px';                //通過scale比例，滾動的時候改變content的top值                oContent.style.top = -scale * (oContent.offsetHeight-oBox.offsetHeight) + 'px';            }            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            }            return false;        }    }</script>