JS各种案例效果

1.进度条拖拽

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>进度条拖拽</title>

    <style>

    *{margin: 0;padding: 0;}

    .box{display: flex;width: 500px;height: 300px;background: #dedede;align-items: center;margin-left: 20px;}

    .box span{width: 100px;text-align: center;}

    .con{width: 400px;height: 30px;background: gray;display: flex;align-items: center;}

    .con p {height: 30px;width: 10px;background: blue;position: relative;}

    .con i {height: 40px;width: 10px;background: red;border-radius: 10px;position: absolute;left: 0;top: -5px;}

    </style>

</head>

<body>

    <div class="box">

        <span>0%</span>

        <div class="con">

            <p><i></i></p>

        </div>

    </div>

</body>

<script>

        class Drag{

            constructor(){

                // 获取元素

                this.span = document.querySelector(".box span");

                this.p = document.querySelector(".con p");

                this.i = document.querySelector(".con i");

                this.con = document.querySelector(".con")

                this.addEvent();

            }

            // 绑定事件

            addEvent(){

                var that = this;

                this.i.onmousedown = function(eve){

                    var e = eve || window.event;

                    // 获取this.i的X坐标

                    that.disX = e.offsetX;

                    // console.log(that.x)

                    that.down();

                    //取消默认事件

                    return false;

                }

            }

            down(){

                var that = this;

                document.onmousemove  = function(eve){

                    var e = eve || window.event;

                    that.move(e);

                }

               document.onmouseup = function(){

                    that.up();

                }

            }

            move(e){

                // console.log(e.clientX ,this.p.offsetLeft,this.disX)

                var l = e.clientX - this.p.offsetLeft - this.disX;

                console.log(l)

                // 边界限定

                if(l < 0) l = 0;;

                //不减去this.i.offsetWidth的宽的话， 会拖超出；

                if(l > this.con.offsetWidth - this.i.offsetWidth){

                    l = this.con.offsetWidth - this.i.offsetWidth;

                }

                this.span.innerHTML = parseInt(l / (this.con.offsetWidth-this.i.offsetWidth)*100) + "%";

                this.i.style.left = l + "px";

                this.p.style.width = l +  this.i.offsetWidth + "px";

            }

            up(){

                // 鼠标抬起取消移动事件

                document.onmousemove = null;

                document.onmouseup = null;

            }

        }

        new Drag();

</script>

</html>

2.无缝轮播-1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>无缝轮播图-1</title>

    <style>

    *{margin: 0;padding: 0;}

    body{background: #dedede;}

    .box{width: 900px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}

    .box a{position: absolute;height: 300px;left: 900px;top: 0;width: 900px;}

    .box a:nth-child(1){left: 0;}

    .btns input{background: blue;border: 1px solid red;width: 50px;height: 50px;position: absolute;z-index: 99999;top: 125px;color: #fff;line-height: 50px;}

    .btns input:nth-child(1){left: 0;}

    .btns input:nth-child(2){right: 0;}

    </style>

</head>

<body>

    <div class="box">

        <a href="#"><img src="./one.png"></a>

        <a href="#"><img src="./two.png"></a>

        <a href="#"><img src="./three.png"></a>

        <div class="btns">

            <input type="button" value="<<<" id="pre">

            <input type="button" value=">>>" id="next">

        </div>

    </div>

</body>

<script src="../move.js"></script>

<script>

    class Banner{

        constructor(){

            this.pre = document.getElementById("pre");

            this.next = document.getElementById("next");

            this.img = document.querySelectorAll(".box a");

            // 初始要显示的图片索引为0，那么就是0进来，length-1走

            this.index = 0;

            // 要走的图片的索引

            this.go = this.img.length-1;

            this.addEvent();

        }

        // -----------------------------------代码简化--------------------------

        addEvent(){

            var that = this;

            this.pre.onclick = function(){

                // pre计算索引

                that.changeIndex(1);

            }

            this.next.onclick = function(){

                // next计算索引

                that.changeIndex(-1);

            }

        }

        changeIndex(d){

            if(d === 1){

                if(this.index === 0){

                    //判断点击上一个的时候索引为0的话，那么就把当前显示的索引改为length-1，要走的图片索引是0；

                    this.index = this.img.length - 1;

                    this.go = 0;

                }else{

                    this.index--;

                    this.go = this.index + 1;

                }

            }else{

                // 判断点击下一个时候索引如果为最后一个，那么就直接把索引改为0，如果显示的图片为0，那么要走的图片索引就是length-1

                if(this.index === this.img.length-1){

                    this.index = 0;

                    this.go = this.img.length-1;

                }else{

                    // 索引不断增加，2显示1走，那么要走的图片的索引就是当前this.index-1

                    this.index ++;

                    this.go = this.index-1;

                }

            }

            this.setActive(d);

        }

        setActive(d){

            // console.log(this.go,this.index)

            this.img[this.go].style.left = 0;

            move(this.img[this.go],{left:this.img[0].offsetWidth * d})

            this.img[this.index].style.left = -this.img[0].offsetWidth * d + "px";

            move(this.img[this.index],{left:0})

        }

    }

        new Banner();

        // -----------------------------------代码简化--------------------------

        // 绑定事件

    //     addEvent(){

    //         var that = this;

    //         this.pre.onclick = function(){

    //             // pre计算索引

    //             that.changeIndexPre(1);

    //         }

    //         this.next.onclick = function(){

    //             // next计算索引

    //             that.changeIndexNext(-1);

    //         }

    //     }

    //     // pre计算索引

    //     changeIndexPre(){

    //         if(this.index === 0){

    //             //判断点击上一个的时候索引为0的话，那么就把当前显示的索引改为length-1，要走的图片索引是0；

    //             this.index = this.img.length - 1;

    //             this.go = 0;

    //         }else{

    //             this.index--;

    //             this.go = this.index + 1;

    //         }

    //         this.setActivePre();

    //     }

    //      // next计算索引

    //     changeIndexNext(){

    //         // 判断点击下一个时候索引如果为最后一个，那么就直接把索引改为0，如果显示的图片为0，那么要走的图片索引就是length-1

    //         if(this.index === this.img.length-1){

    //             this.index = 0;

    //             this.go = this.img.length-1;

    //         }else{

    //             // 索引不断增加，2显示1走，那么要走的图片的索引就是当前this.index-1

    //             this.index ++;

    //             this.go = this.index-1;

    //         }

    //         this.setActiveNext();

    //     }

    //     setActivePre(){

    //         // console.log(this.go,this.index)

    //         this.img[this.go].style.left = 0;

    //         move(this.img[this.go],{left:this.img[0].offsetWidth})

    //         this.img[this.index].style.left = -(this.img[0].offsetWidth) + "px";

    //         move(this.img[this.index],{left:0})

    //     }

    //     setActiveNext(){

    //         // console.log(this.go,this.index)

    //         //要走的图片的位置

    //         console.log(this.go)

    //         this.img[this.go].style.left = 0;

    //         // 初始点击，要走的图片索引是0，进来的是1,0的left是自身负offsetwidth的距离

    //         move(this.img[this.go],{left:-this.img[0].offsetWidth})

    //         // 要显示的图片的位置

    //         //初始点击，要进来的图片索引是1，出去的0,1的left是自身正是offsetwidth；

    //         this.img[this.index].style.left = (this.img[0].offsetWidth) + "px";

    //         move(this.img[this.index],{left:0})

    //     }

    // }

</script>

</html>

3.烟花

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>烟花高级版</title>

    <style>

    *{margin: 0;padding: 0;}

    .box{width: 1000px;height: 600px;background: #000;border: 1px solid blue;margin: 20px auto;position: relative;overflow: hidden;}

    .fire{width: 10px;height: 10px;position: absolute;bottom: 0;}

    .small-fire{width: 10px;height: 10px;border-radius: 50%;position: absolute;}

    </style>

</head>

<body>

    <div class="box"></div>

</body>

<script src="../move.js"></script>

<script>

    class Fire{

        constructor(box,pos){

            // 解析参数

            this.box = box;

            this.x = pos.x;

            this.y = pos.y;

            this.createFire();

        }

        createFire(){

            // 创建大烟花，并且设置样式，然后运动

            this.ele = document.createElement("div");

            this.ele.className = "fire";

            this.ele.style.background = randomColor();

            this.ele.style.left = this.x + "px";

            this.box.appendChild(this.ele);

            this.moveFire();

        }

        // 大烟花开始向上移动，移动到鼠标点击的位置，即x,y

        moveFire(){

            var that = this;

            move(this.ele,{top:this.y},function(){

                // 删除烟花，注意，这里拿不到this.ele,返回undefinded,

                // 因为class语法是es6语法，自带严格模式；这里的this指向undefined；

                // console.log(this):undefined

                that.ele.remove();

                that.smallFire();

            })

        }

        smallFire(){

            // 随机小烟花的个数

            var num = random(10,20);

            //因为炸开是圆形，所以定义圆的半径；

            var r = random(100,200);

            for(var i = 0;i < num ;i++){

                // 这里用let是因为let具有块级作用域，用var的话，div只会删除最后一个，

                let div = document.createElement("div");

                div.className = "small-fire";

                div.style.background = randomColor();

                div.style.left = this.x + "px";

                div.style.top = this.y + "px";

                this.box.appendChild(div);

                // 定义小烟花炸开的位置

                var t = {

                    x : Math.cos(Math.PI/180 * (360/num) * i)* r + this.x,

                    y : Math.sin( Math.PI/180 * (360/num)*i ) * r + this.y

                }

                // 小烟花开始移动

                move(div,

                {left:parseInt(t.x),top:parseInt(t.y)},

                function(){

                    // 删除小烟花

                    div.remove();

                })

            }

        }

    }

    // 随机数

    function random(a,b){

        return  Math.round(Math.random() * (a-b) + b);

    }

    // 随机颜色

    function randomColor(){

        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;

    }

    // 要在外面获取，并且点击的时候new对象，因为每个烟花都是不一样的，每个对象都不相等

    var box = document.querySelector(".box");

    box.onclick = function(eve){

        var e = eve || window.event;

        var target = {

            // 获取位置，定位大烟花的left位置

            x : e.offsetX,

            y : e.offsetY

        }

        // 把值作为参数传给对象

        new Fire(box,target);

    }

</script>

</html>

4.放大镜

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>放大镜</title>

    <style>

        *{margin: 0;padding: 0;}

        li{list-style: none;}

        .box1{position: relative;height:400px;margin-top: 20px;}

        .small{width:400px;height:300px;position: absolute;left: 50px;}

        .small img{width:400px;height:300px;}

        .small span{position: absolute;background: grey; opacity: .6;left:0;top:0;display: none;}

        .big{width:400px;height:300px;position: absolute;display: none;left: 500px;top:100px;overflow: hidden;}

        .big img{width: 1200px;height: 900px;position: absolute;}

        .items{position: absolute;top: 320px;left: 50px;}

        .items a{float: left;margin-left:30px;}

        .items a img{width: 100px;border: 1px solid black;display: block;}

        .items input{position: absolute;background: rgba(200, 200, 200,.7 );border: none;width: 30px;height: 65px;}

        #pre{left: 0;}

        #next{left: 370px;}

    </style>

</head>

<body>

    <div class="box1">

        <div class="small">

            <img src="./img/2.jpg">

            <span></span>

        </div>

        <div class="big">

            <img src="./img/2.jpg" alt="">

        </div>

        <!-- <div class="items">

            <a href="#"><img src="./img/2.jpg" alt=""></a>

            <a href="#"><img src="./img/1.jpg" alt=""></a>

            <a href="#"><img src="./img/2.jpg" alt=""></a>

            <a href="#"><img src="./img/1.jpg" alt=""></a>

            <a href="#"><img src="./img/2.jpg" alt=""></a>

            <a href="#"><img src="./img/1.jpg" alt=""></a>

            <a href="#"><img src="./img/2.jpg" alt=""></a>

            <a href="#"><img src="./img/1.jpg" alt=""></a>

            <input type="button" value="<<<" id="pre">

            <input type="button" value=">>>" id="next">

        </div> -->

    </div>

</body>

<script>

    class Big{

        constructor(){

            // 获取元素

            this.small = document.querySelector(".small");

            this.smallImg = document.querySelector(".small img");

            this.big = document.querySelector(".big");

            this.bigImg = document.querySelector(".big img");

            this.span = document.querySelector("span");

            // 绑定事件

            this.addEvent();

        }

        // 绑定事件功能

        addEvent(){

            var that = this;

            this.small.onmouseover = function(){//进入事件

                that.over();

            }

            this.small.onmousemove = function(eve){//移动事件

                var e = eve || window.event;

                that.move(e);

            }

            this.small.onmouseout = function(){//移出事件

                that.out();

            }

        }

        //进入事件功能

        over(){

            this.span.style.display = "block";//显示span

            this.big.style.display = "block";//显示右边的大框

            this.bigW = this.big.offsetWidth;//大框的宽度

            this.bigImgW = this.bigImg.offsetWidth;//大图片的宽度

            this.smallW = this.small.offsetWidth;//小框的宽度

            this.bigH = this.big.offsetHeight;//大框的高度

            this.bigImgH = this.bigImg.offsetHeight;//大图片的高度

            this.smallH = this.small.offsetHeight;//小框的高度

            // 计算span的宽高：大框的宽度 / 大图片的宽度 * 小框的宽度

            this.SpanW = this.bigW / this.bigImgW * this.smallW;//span的宽

            this.SpanH = this.bigH / this.bigImgH * this.smallH;//span的高

            this.span.style.width = this.SpanW + "px";//给span的宽赋值

            this.span.style.height = this.SpanH + "px";//给span的高赋值

        }

        // 移动事件功能

        move(e){

            // 计算span的left,top

            this.sSpanL = e.clientX - this.small.offsetLeft - this.span.offsetWidth/2;//可视区域的距离减去小框的left-减去span的宽的一半

            this.sSpanT = e.clientY - this.small.offsetTop - this.span.offsetHeight/2;//可视区域的距离减去小框的top-减去span的高的一半

            // 边界限定

            if(this.sSpanL < 0) this.sSpanL = 0;

            if(this.sSpanT < 0) this.sSpanT = 0;

            if(this.sSpanL > this.smallW - this.SpanW) this.sSpanL = this.smallW - this.SpanW;

            if(this.sSpanT > this.smallH - this.SpanH) this.sSpanT = this.smallH - this.SpanH;

            this.span.style.left = this.sSpanL + "px";//给span的left赋值

            this.span.style.top = this.sSpanT + "px";//给span的top赋值

            // 计算大图移动的位置:span的left / (小框的宽 - span的宽) * (大框宽 - 大图的宽)

            // 计算大图移动的位置:span的top / (小框的高 - span的高) * (大框高 - 大图的高)

            this.bigImg.style.left = this.sSpanL / (this.smallW - this.SpanW) * (this.bigW - this.bigImgW) + "px";

            this.bigImg.style.top = this.sSpanT / (this.smallH - this.SpanH) * (this.bigH - this.bigImgH) + "px";

        }

        //移出事件功能

        out(){

            this.span.style.display = "none";//隐藏span

            this.big.style.display = "none";//隐藏右边大框

        }

    }

    new Big();

</script>

</html>

5.瀑布流

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>瀑布流</title>

    <style>

    *{margin: 0;padding: 0;}

    .con{margin: 0 auto;position: relative;}

    .box{float: left;padding: 4px;}

    .imgbox{border: solid 1px black;padding: 4px;border-radius: 4px;}

    .imgbox img{width: 200px;display: block;}

    </style>

    <script>

    onload = function (){

        new waterfall();

    }

    class waterfall{

        constructor(){

            this.con = document.querySelector(".con");

            this.img = document.querySelectorAll(".imgbox img");

            this.box = document.querySelectorAll(".box");

            console.log(this.box)

            this.boxW = this.box[0].offsetWidth;//获取宽度

            this.clientW = document.documentElement.clientWidth;//获取可视区域宽度

            this.clientH = document.documentElement.clientHeight;//获取可视区域高度

            // this.data = [{img:"images/1.jpg"},{img:"images/2.jpg"},{img:"images/3.jpg"},{img:"images/4.jpg"},{img:"images/5.jpg"},{img:"images/6.jpg"},{img:"images/7.jpg"},{img:"images/8.jpg"},{img:"images/9.jpg"},{img:"images/10.jpg"}];

            // this.addEvent();

            this.init();

        }

        // 初始化计算con的宽度

        init(){

            this.maxNum = parseInt(this.clientW / this.boxW);//计算第一行最多能放几个

            this.con.style.width = this.maxNum * this.boxW + "px";//给con的宽度赋值

            this.firstLine();

            this.otherLine();

        }

        // 获取第一行高度最少的那个

        firstLine(){

            this.firstLineHeight = [];

            for(var i = 0;i < this.maxNum;i++){

                // console.log(this)

                this.firstLineHeight.push(this.box[i].offsetHeight)

            }

        }

        otherLine(){

            for(var i = this.maxNum;i < this.box.length;i++){

                var min = getMin(this.firstLineHeight);//取得最小高度

                var minIndex = this.firstLineHeight.indexOf(min);//取得最小高度的索引

                this.box[i].style.position = "absolute";

                this.box[i].style.top = min + "px";

                this.box[i].style.left = minIndex * this.boxW + "px";

                // this.firstLineHeight[minIndex] :不断的改变最小值

                this.firstLineHeight[minIndex] = this.firstLineHeight[minIndex] + this.box[i].offsetHeight;

                // console.log(this.firstLineHeight[minIndex])

            }

        }

        // addEvent(){

        //     var that = this;

        //     onscroll = function(){

        //         if(that.isBottom()){

        //             that.addImg();

        //         }

        //     }

        // }

        // addImg(){

        //     var str = "";

        //     for(var i = 0;i<this.data.length;i++){

        //         str += ` <div class="box">

        //                     <div class="imgbox">

        //                         <img src="./${this.data[i].img}" alt="">

        //                     </div>

        //                 </div>`

        //     }

        //     this.con.innerHTML += str;

        //     this.box = document.querySelectorAll(".box");

        //     this.firstLine();

        //     this.otherLine();

        // }

        // isBottom(){

        //     var scrollT = document.documentElement.scrollTop;

        //     var scrollH = document.documentElement.scrollHeight;

        //     if(this.clientH + scrollT + 300 > scrollH){

        //         return true;

        //     }else{

        //         return false;

        //     }

        // }

    }

    // 获取最小值封装

    function getMin(arr) {

        var myarr = [];

        for(var i = 0;i < arr.length;i++){

            myarr.push(arr[i]);

        }

        return myarr.sort((a,b) => a-b)[0];

    }

    </script>

</head>

<body>

    <div class="con">

        <div class="box">

            <div class="imgbox">

                <img src="./images/2.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/1.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/3.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/4.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/5.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/6.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/7.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/8.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/9.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/10.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/2.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/1.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/3.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/4.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/5.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/6.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/7.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/8.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/9.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/10.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/2.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/1.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/3.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/4.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/5.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/6.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/7.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/8.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/9.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/10.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/1.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/3.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/4.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/5.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/6.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/7.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/8.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/9.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/10.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/1.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/3.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/4.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/5.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/6.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/7.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/8.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/9.jpg" alt="">

            </div>

        </div>

        <div class="box">

            <div class="imgbox">

                <img src="./images/10.jpg" alt="">

            </div>

        </div>

    </div>

</body>

</html>

JS各种案例效果的更多相关文章

【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

随机推荐

SQL——IN操作符
一.IN操作符基本用法 IN操作符用于在WHERE字句中规定多个值. 语法格式如下: SELECT 列名1,列名2... FROM 表名 WHERE 列名 IN(值1,值2...); 示例studen ...
Python3基础语法（20190617）
字符串字符串是以单引号'或双引号"括起来的任意文本,比如'abc',"xyz"等等.请注意,''或""本身只是一种表示方式,不是字符串的一部分,因此 ...
python 操作redis集群
一.连接redis集群 python的redis库是不支持集群操作的,推荐库:redis-py-cluster,一直在维护.还有一个rediscluster库,看GitHub上已经很久没更新了. 安装 ...
java mybatis
mybatis简单使用记录一下 mybatis官网:http://www.mybatis.org/mybatis-3/ 参考博客:https://blog.csdn.net/iku5200/artic ...
转让NET C# 程序独立运行(脱离 .NET Framework运行，绿色运行) 未验证
但是.net版本众多.而且.NET Framework框架很大.拖着一个大大的.net Framework总是让人很郁闷. 在网上找呀找呀.找到另一个.NET Framework 替代方案.Mono. ...
NEST 字符串sort
text字符串sort会先分词.可先建立filed字段.并设置为keyword mapping public void Mapping() { var response = client.IndexE ...
JS中的函数与对象
创建函数的三种方式 1.函数声明 function calSum1(num1, num2) { return num1 + num2; } console.log(calSum1(10, 10)); ...
webpack--splitChunksPlugin配置学习随笔
该配置用于代码抽离.官方文档官方默认配置: module.exports = { //... optimization: { splitChunks: { chunks: 'async', // 异 ...
用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写
说明结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...
MySQL数据库的事物隔离级别
一. 查看数据库的事物隔离级别 mysql> show variables like '%isolation'; +-----------------------+--------------- ...

JS各种案例效果

JS各种案例效果的更多相关文章

随机推荐

热门专题