原生Js的三個demo

weixin_33782386發表於2017-10-21
JS

  • 輪播圖（左右輪播）

1.實現功能：

 - 滑鼠不在圖片上方時進行自動輪播，並且箭頭不會顯示，當滑鼠放在圖片上方時停止輪播，並箭頭會顯示；
 - 圖片切換之後圖片中下方的小圓點會同時進行切換，並且點選相應的小圓點可以切換到相應的圖片上
 - 點選左右箭頭可以進行左右圖片的切換

2. 基本原理：

將多個圖片並排成一行，包含在兩個盒子中，第一層盒子寬和高與圖片的一致，並用overflow：hidden控制只顯示一張圖片；第二個盒子高度與圖片一致，而寬度須足夠容納下全部圖片；通過設定第二個盒子的偏移量進而改變顯示的圖片；另一方面對於無限輪播，顯示N張圖片實際上為N+2圖片，第一張圖片前面還有最後一張圖片而最後一張圖片後面還有第一張圖片。

3.程式碼實現：

html佈局：

<div class="container">
        <div class="img-lists" style="left: -500px;">
            ![](img/webwxgetmsgimg.jpg)
            ![](img/demo1.jpg)
            ![](img/webwxgetmsgimg%20(1).jpg)
            ![](img/webwxgetmsgimg%20(2).jpg)
            ![](img/webwxgetmsgimg.jpg)
            ![](img/demo1.jpg)
        </div>
        <div class="btns">
            <span index = '1' class="on"></span>
            <span index = '2'></span>
            <span index = '3'></span>
            <span index = '4'></span>
        </div>
            <a href="javascript:;" class="arrow prev"><</a>
            <a href="javascript:;" class="arrow next">></a>
    </div>

css樣式表：

.container{
    width: 500px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.img-lists{
    width: 4000px;
    height: 300px;
    position: absolute;
}
img{
    width: 500px;
    height: 300px;
    float: left;
    z-index: 1;
}
.btns{
    z-index: 2;
    position: absolute;
    left:45%;
    bottom: 20px;
}
.btns span{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #aaaaaa;
    float: left;
    margin-left: 4px;
}
.btns .on{
    background-color: floralwhite;
}
.arrow{
    width: 45px;
    font-size: 45px;
    color: white;
    text-align: center;
    display: none;
    position: absolute;
    top:40%;
    background-color: rgba(128,128,128,0.7);
}
.container:hover .arrow{
    display: block;
}

Js操作：

//自動播放
function autoPlay() {
    timer = setInterval(function () {
        getLeft(-500);
        changeIndex(true);
    }, 1000);
}
//計算偏移量
function getLeft(offset) {
    var list = document.getElementsByClassName("img-lists")[0];
    var newLeft = parseInt(list.style.left) + offset;
    var time = 300;
    var interval = 10;
    var speed = offset/(time/interval);
    animated = true;
//實現動畫效果
    function go() {
        if((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)<newLeft)){
            list.style.left = parseInt(list.style.left) + speed + 'px';
            setTimeout(go,interval);
        }
        else {
            animated = false;
            list.style.left = newLeft + 'px' ;
            if (newLeft < -2000) {
                list.style.left = -500 + "px";
            }
            if (newLeft > -500) {
               list.style.left = -2000 + 'px';
            }
        }
    }
    go();

}
//更改小圓點的狀態
function changeIndex(action) {
    if (action) {
        index++;
    }
    else {
        index--;
    }
    if (index === 4) {
        index = 1;
    }
    if (index === 1) {
        index = 4;
    }
    activeBtn();
}
function activeBtn() {
    var btns = document.getElementsByTagName("span");
    var len = btns.length;

    for (var i = 0; i < len; i++) {
        btns[i].className = "";
    }
    for (var i = 0; i < len; i++) {
        if (index === parseInt(btns[i].getAttribute("index"))) {
            btns[i].className = "on";
        }
    }
}
/**停止播放/
function stopPlay() {
    clearInterval(timer);
}

function eventBind() {
    var container = document.getElementsByClassName("container")[0];
    var list = document.getElementsByClassName("img-lists")[0];
    var btns = document.getElementsByTagName("span");
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];
/*實現自動功能1*/
    container.onmousemove = stopPlay;
    container.onmouseout = autoPlay;
/*實現功能2*/
    var len = btns.length;
    for (var i = 0; i < len; i++) {
        (function (i) {
            btns[i].onclick = function () {
                var ind = btns[i].getAttribute("index");
                getLeft(-500 * (ind - index));
                index = parseInt(ind);
                activeBtn();
            };
        })(i);
    }
 /*實現功能3*/   
    next.onclick = function () {
        changeIndex(true);
        if (!animated){
            getLeft(-500);
        }
    };
    prev.onclick = function () {
        changeIndex(false);
        if (!animated){
            getLeft(500);
        }
    };
}

  • 回到頂部

1.實現功能：

 點選按鈕之後可以由快到慢地回到頂部

2.基本原理：

 通過scrollTop值以一定規律的設定進而實現回到頂部，接著對scrollTop的值與clientHeight進行比較判斷按鈕出現的時刻

1.程式碼實現：

整個背景我使用的是圖片
html:

 <div class="container">
        ![](img/demo2.jpg)
    </div>
    <div class="btn" style="display: none;"></div>

css:

.container {
    width: 1190px;
    margin: 0 auto;
}

.btn{
    width: 40px;
    height: 40px;
    position: fixed;
    left:50%;
    margin-left: 610px;
    bottom: 30px;
    background: url("img/demo2-btn.jpg") no-repeat left top;
}
.btn:hover{
    background: url("img/demo2-btn.jpg") no-repeat left top -40px;
}

Js：


function goUp() {
    var btn = document.getElementsByClassName("btn")[0];
    var isTop = true;
    var timer;


    window.onscroll = function () {
        btnStatue();
        if (!isTop) {
            clearInterval(timer);
        }
        isTop = false;
    };
    btn.onclick = function () {
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;
             timer = setInterval(function () {
            isTop = true;
            sTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (sTop > 0) {
                var speed = Math.floor(-sTop / 6);
                document.documentElement.scrollTop = document.body.scrollTop = sTop + speed;
            }
            if (sTop === 0) {
                clearInterval(timer);
            }
        }, 50);

    };
}

function btnStatue() {
    var btn = document.getElementsByClassName("btn")[0];
    var scroll = document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight = document.documentElement.clientHeight;
    if (scroll >=clientHeight) {
        console.log(222);
        btn.style.display = "block";
    }
    else {
        btn.style.display = "none";
    }
}

  • 瀑布流佈局

1.實現功能：

 多個等寬的圖片進行穿插排序，並且在最後一張圖片之後再進行下拉時能夠在進行載入其他圖片

2.基本原理：

 進行佈局時可以分為兩部分：
   - 第一部分：圖片的排序；首先是在設定每個圖片之間的距離時應使用padding，這樣一來便可以通過offsetHeight/Width獲取到圖片到頁面頂部以及到頁面左邊的距離；接著接著計算出整個頁面中可放置的列數N，設定最大盒子的寬度，保證在縮小頁面的時候列數不會改變；最後將每一列的高度放置在陣列中，接下來的圖片應放置在高度總共最小的那一列，使用position進行位置的設定，並更新先前的陣列；
   - 第二部分：載入新圖片；（在我的程式碼中我將即將載入的圖片存在一個變數中進行引入）主要為建立與原先結構相同的結點，通過appendChild()將每一個圖片引入原有的html中

3.程式碼實現：

html

<div class = "container">
<div class="box">
        <div class="pic">
            ![](img/5.jpg)
        </div>
    </div>
......//多個BOX
</div>

css

*{
    margin: 0;
    padding: 0;
}
#container{
    position: relative;
}
.box{
    padding: 15px 0 0 15px;
    float: left;

}
.pic{
    padding: 10px;
    border: 1px solid #333333;
    border-radius: 5px;
    box-shadow:0px 0px 5px #aaaaaa;

}
.pic img{
    width: 235px;
    height: auto;
}

js

//第一部分的實現
function waterFall(parent, box) {
    var oParent = document.getElementById(parent);
    var oBox = getByClass(oParent, box);//獲取parent下的所有樣式名為box的元素
    var cols = Math.floor(document.documentElement.clientWidth / oBox[0].offsetWidth);

    oParent.style.cssText = "width:" + cols * oBox[0].offsetWidth + "px;margin:0 auto";

    var hArr = [];

    for (var i = 0; i < oBox.length; i++) {
        if (i < cols) {
            hArr.push(oBox[i].offsetHeight);
        }
        else {
            var hMin = Math.min.apply(null, hArr);
            var index = getIndex(hArr, hMin);
            oBox[i].style.position = "absolute";
            oBox[i].style.top = hMin + 'px';
            oBox[i].style.left = index * oBox[i].offsetWidth + "px";
            hArr[index] += oBox[i].offsetHeight;
        }
    }
}

//第二部分
 var dataInt = {"data": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}]};
    window.onscroll = function () {
        if (checkScrollSlide) {
            console.log(1111111);

            var container = document.getElementById("container");

            for (var i = 0; i < dataInt.data.length; i++) {
                var box = document.createElement("div");
                box.className = "box";
                container.appendChild(box);
                var pic = document.createElement("div");
                pic.className = "pic";
                box.appendChild(pic);
                var img = document.createElement("img");
                img.src = "img/" + dataInt.data[i].src;
                pic.appendChild(img);
            }
            waterFall('container', 'box');
        }
    }

  

  • 總結體會：

  通過本次的學習讓我發現了對js的DOM操作的不熟悉，同時也學到了更多對於動畫效果實現的技巧（相對動畫的形式進行改變時可以對資料的變化進行一定的控制，使動畫在過渡時捕獲那麼生硬）；在自己寫程式碼的時候也遇到了不少的問題積累了經驗（a標籤中herf設定為javascript:;可以阻止頁面的預設行為）

相關文章