您现在的位置是：首页 > Javascript

当前栏目

JS案例展示

2023-03-15 22:47:16 时间

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>

猜你喜欢

Python中的函数与方法以及Bound Method和Unbound Method
从本体论开始说起——运营商关系图谱的构建及应用
一篇运维老司机的大数据平台监控宝典（2）-联通大数据集群平台监控体系详解
一篇运维老司机的大数据平台监控宝典（1）-联通大数据集群平台监控体系进程详解
Flask中的请求上下文和应用上下文
深入探讨Java中的异常与错误处理
研究学习Kotlin的一些方法
如何成为一名数据科学家？
金融服务领域的大数据：即时分析
影响大数据、机器学习和人工智能未来发展的8个因素
从未见过的堂兄杀了人，你的DNA是关键证据
一文贯通python文件读取
数据显示Java热度持续下落，日子屈指可数？
从0开始构建一个属于你自己的PHP框架
如何将Hadoop集成到工作流程中？这6个优秀实践必看
2017年5月编程语言排行榜：Java与C语言优势正开始缩小
SEO公司使用大数据优化其模型的5种方法
Java多线程之内置锁与显示锁
关于Web Workers你需要了解的七件事
20个安全可靠的免费数据源，各领域数据任你挑

zl程序教程

当前栏目

JS案例展示

相关文章