原生Js的三个demo

作者: heheheyuanqing | 来源:发表于2017-10-21 20:05 被阅读31次

原生Js的三个demo
Javascript和android原生互调
Js实现瀑布流
原生js的小demo整理
文本编辑器---iOS本地与JavaScript交互解决方案
OC与JS交互
当js文件里同时具有js原生和jquery文件该如何放置
JS作用域的练习
2019-05-15 Android 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;
}

//第一部分的实现
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:;可以阻止页面的默认行为）

原生Js的三个demo
轮播图（左右轮播） 1.实现功能： - 鼠标不在图片上方时进行自动轮播，并且箭头不会显示，当鼠标放在图片上方时停...
Javascript和android原生互调
`最近在做原生和js端的互调的功能，自己改了个demo，给大家讲解下。先上js代码 android webview...
Js实现瀑布流
1.使用原生js实现瀑布流效果,demo地址（https://xukeler.github.io/waterfal...
原生js的小demo整理
1.二级导航（js方法和css3的方法）--建议使用css3样式（若两种方法实现的效果一样） (1)js方法例...
文本编辑器---iOS本地与JavaScript交互解决方案
iOS原生OC与JS互调本文demo：git地址由于前段时间刚刚完成一个比较复杂的本地与原生的交互应用...
OC与JS交互
本文为转载，由于写的比较详细，也比较全面，就收藏了，十分感谢作者！ JS_OC JS与原生OC互相调用的Demo(...
当js文件里同时具有js原生和jquery文件该如何放置
当自己的demo.js文件里既有原生js的文件，又有jquery的文件时，该如何放置比较好呢？答案是该怎么放置就...
JS作用域的练习
Js作用域练习demo1 Js作用域练习demo2 JS作用域练习demo3 JS作用域练习demo4 JS作用域...
2019-05-15 Android js和原生交互
Android js和原生交互简单的demo 布局 HTML页面，把该页面放置在assets文件夹下记得添加
小程序下拉刷新
pages/demo/demo.json pages/demo/demo.js

原生Js的三个demo

轮播图（左右轮播）

1.实现功能：

2. 基本原理：

3.代码实现：

回到顶部

1.实现功能：

2.基本原理：

1.代码实现：

瀑布流布局

1.实现功能：

2.基本原理：

3.代码实现：

总结体会：

相关文章

原生Js的三个demo

Javascript和android原生互调

Js实现瀑布流

原生js的小demo整理

文本编辑器---iOS本地与JavaScript交互解决方案

OC与JS交互

当js文件里同时具有js原生和jquery文件该如何放置

JS作用域的练习

2019-05-15 Android js和原生交互

小程序下拉刷新

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读