美文网首页
技术练习的demo集

技术练习的demo集

作者: 洛音轩 | 来源:发表于2019-11-30 09:35 被阅读0次

    demo1 实现优酷轮播图效果

    页面效果展示

    image.png
    image.png

    功能：自动轮播，hover停止轮播，点击left/right上一页/下一页

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css"></link>
    <script src="jquery.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="move">
            <img src="01.jpg"></img>
        </div>      
        <div class="move">
            <img src="02.jpg"></img>
        </div>  
        <div class="move">
            <img src="03.jpg"></img>
        </div>
        
        
        <div class="move">
            <img src="04.jpg"></img>
        </div>
        <div class="move">
            <img src="05.jpg"></img>
        </div>
        <div class="move">
            <img src="06.jpg"></img>
        </div>
        <div class="btn btnLeft"> left </div>
        <div class="btn btnRight"> right </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

    var oLi = $('.wrapper .move');

var index = 0;

var timer = null;
var flag = true;
function init () {
    oLi.css({left: '800px','z-index':'1','top':'50%','height':'0px','margin-top':'0px'});
    oLi.eq(0).css({'top':'50%','margin-top':'-90px','height':'180px','width':'250px','left':'0px','opacity':'0.4','z-index':'1'});
    oLi.eq(1).css({'top':'0','margin-top':'0px','height':"300px",'width':'400px','left':'200px','opacity':'1','z-index':'100'});
    oLi.eq(2).css({'top':'50%','margin-top':'-90px','height':'180px','width':'250px','left':'550px','opacity':'0.4','z-index':'1'});
        
}

function leftMove () {
    if (flag) {
        flag = false;
        oLi.css({"z-index":'1'});
        oLi.eq( index % 6).animate({
            'left':'-250px',
            'width':'250px;',
            'height':'0',
            'top':'50%',
            'margin-top':'0px',
            'opacity':'0'
        });
        oLi.eq( (index + 1) % 6).animate({
            'left':'0px',
            'width':'250px',
            'height': '180px',
            'top':'50%',
            'margin-top':'-90px',
            'opacity':'0.4'
        });
        //oLi.css({'z-index':'100'});
        oLi.eq( (index + 2) % 6 ).animate({
            'left':'200px',
            'width':'400px',
            'height':'300px',
            'top':'0px',
            'margin-top':'0px',
            'opacity':'1',
            'z-index':'100'
        });
        oLi.eq( (index + 3) % 6 ).css({'left':'800px'});
        oLi.eq( (index + 3) % 6).animate({
            'left':'550px',
            'width':'250px',
            'height':'180px',
            'top':'50%',
            'margin-top':'-90px',
            'opacity':'0.4'
        },function () {
            index++;
            flag = true;
        });     
    }
}

function rightMove () {
    if (flag) {
        flag = false;
        oLi.css({'z-index':'1'});
        // 最新出来的图片
        oLi.eq((index-1) % 6).css({'left':'-250px'});
        oLi.eq( (index - 1) % 6).animate({
            'left':'0px',
            'width':'250px',
            'height':'180px',
            'top':'50%',
            'margin-top':'-90px',
            'opacity':'0.4'
        });
        
        oLi.eq(index % 6).animate({
            'left':'200px',
            'width':'400px',
            'height':'300px',
            'top':'0px',
            'margin-top':'0px',
            'opacity':'1',
            'z-index':'100'
        });
        
        oLi.eq((index + 1) % 6).animate({
            'left':'550px',
            'width':"250px",
            'height':'180px',
            'top':'50%',
            'margin-top':'-90px',
            'opacity':'0.4'
        });
        
        oLi.eq((index + 2) % 6).animate({
            'left':'800px',
            'width':'250px',
            'height':'0px',
            'top':'50%',
            'margin-top':'0',
            'opacity':'0.4'
        },function () {
            index--;
            flag = true;
        });
    }
}
$('.btnRight').on('click',function () {
    rightMove();
});

$('.btnLeft').on('click',function () {
    leftMove();
})

init();


timer = setInterval(leftMove,1000);

$('.wrapper').on('mousemove',function () {
    clearInterval(timer);
})
$('.wrapper').on('mouseout',function () {
    timer = setInterval(leftMove,1000);
})

    * {
    padding: 0;
    margin: 0;
}
.wrapper {
    position: relative;
    width: 800px;
    height: 300px;
    margin:  0 auto;
    border: 1px solid black;
    overflow: hidden;
}
.wrapper .btn {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: gray;
    opacity: 0.2;
    cursor: pointer;
    z-index: 1000;
}
.wrapper .btn:hover {
    opacity: 1;
}
.wrapper .btnLeft {
    left: 20px;
}
.wrapper .btnRight {
    right: 20px;
}
.wrapper .move {
    position: absolute;
    top: 50%;
    margin-top: -90px;
    width: 250px;
    height: 180px;
    float: left;
    opacity: 0.4;
}
.wrapper .move img {
    width: 100%;
    height: 100%;
}

    demo2 利用es6方法实现数据的过滤

    // 源数据
var arr = [{
        id: 1,
        name: 'storeName1',
        data: [{
                isSplit: true,
                id: 1,
                name: 'item1',
            },
            {
                isSplit: false,
                id: 2,
                name: 'item2',
            },
            {
                isSplit: false,
                id: 3,
                name: 'item3',
            },
            {
                isSplit: true,
                id: 4,
                name: 'item4',
            },
            {
                isSplit: false,
                id: 5,
                name: 'item5',
            }
        ]
    },
    {
        id: 2,
        name: 'storeName2',
        data: [{
                isSplit: false,
                id: 1,
                name: 'item1',
            },
            {
                isSplit: false,
                id: 2,
                name: 'item2',
            },
            {
                isSplit: true,
                id: 3,
                name: 'item3',
            },
            {
                isSplit: true,
                id: 4,
                name: 'item4',
            },
            {
                isSplit: false,
                id: 5,
                name: 'item5',
            },
        ]
    },
    {
        id: 3,
        name: 'storeName3',
        data: [{
                isSplit: false,
                id: 1,
                name: 'item1',
            },
            {
                isSplit: false,
                id: 2,
                name: 'item2',
            },
            {
                isSplit: false,
                id: 3,
                name: 'item3',
            },
            {
                isSplit: false,
                id: 4,
                name: 'item4',
            },
            {
                isSplit: false,
                id: 5,
                name: 'item5',
            },
        ]
    },
    {
        id: 4,
        name: 'storeName4',
        data: [{
                isSplit: false,
                id: 1,
                name: 'item1',
            },
            {
                isSplit: true,
                id: 2,
                name: 'item2',
            },
            {
                isSplit: false,
                id: 3,
                name: 'item3',
            },
            {
                isSplit: true,
                id: 4,
                name: 'item4',
            },
            {
                isSplit: false,
                id: 5,
                name: 'item5',
            },
        ]
    }
]

// 练习：
// 把arr数组里面同一个storeName下的data数组中数据isSplit为true的单独拉出来
// 生成一个新的对象放入arr中，原先data中isSplit为true的要删掉
// 结合html+css
// 运用es6 数组操作知识
// 如下：
// var arr = [
//   {
//     id: 1,
//     name: 'storeName1',
//     data: [
//       {
//         isSplit: true,
//         id: 1,
//         name: 'item1'
//       },
//       ...more,
//     ]
//   },
//   {
//     id: 1,
//     name: 'storeName1',
//     data: [
//       {
//         isSplit: false,
//         id: 2,
//         name: 'item2'
//       },
//       ...more,
//     ]
//   },
//   ...more,
// ]

// dom
<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        body,
        html {
            height: 100%;
        }
        
        .global {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        
        .global ul {
            background: rgb(233, 93, 251);
            width: 100%;
            text-align: center;
        }
        
        .global .button {
            background: rgb(151, 116, 207);
        }
        
        .global .button:hover {
            cursor: pointer;
        }
        
        .global li {
            width: 100%;
            height: 20px;
            background: rgb(250, 7, 189);
        }
    </style>
    <script src="./数组.js"></script>
</head>

<body>
    <div class="global">
        <ul class="button">
            重新排列
        </ul>
    </div>
    <script>
        function l(a) {
            console.log(a);
        }

        var global = document.querySelector('.global');

        function show(arr) {
            for (item in arr) {
                var ul = document.createElement('ul');
                ul.className = arr[item].name;
                ul.innerText = arr[item].name;
                var secondArr = arr[item].data;
                for (item in secondArr) {
                    var li = document.createElement('li');
                    li.innerText = secondArr[item].name;
                    ul.appendChild(li);
                }
                global.appendChild(ul);
            }
        }

        function sort(arr) {
            var sortArr = [];
            for (item in arr) {
                var secondArr = arr[item].data;
                let trueArr = {
                    id: "",
                    name: "",
                    data: []
                };
                let falseArr = {
                    id: "",
                    name: "",
                    data: []
                };
                for (it in secondArr) {
                    if (secondArr[it].isSplit) {
                        trueArr.id = arr[item].id;
                        trueArr.name = arr[item].name;
                        trueArr.data.push(secondArr[it]);
                    } else {
                        falseArr.id = arr[item].id;
                        falseArr.name = arr[item].name;
                        falseArr.data.push(secondArr[it]);
                    }
                }
                if (trueArr.id) {
                    sortArr.push(trueArr);
                }
                if (falseArr.id) {
                    sortArr.push(falseArr);
                }
            }
            return sortArr;
        }

        var sortArr = sort(arr);
        var button = document.querySelector(".button");
        let flag;
        show(arr);
        button.onclick = function() {
            global.innerHTML = "";
            flag = !flag;
            if (flag) {
                show(sortArr);
            }
        }
    </script>
</body>
</html>

    排序前


    image.png

    排序后效果


    image.png

    相关文章

      网友评论

          本文标题：技术练习的demo集

          本文链接：https://www.haomeiwen.com/subject/uoqcvctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|技术练习的demo集|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！