一个简单的滑动溢出效果

Posted 2020-11-30 honely1314

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单的滑动溢出效果相关的知识，希望对你有一定的参考价值。

<!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">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    import Vue before Element
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    import javascript
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <title>todolist</title>
    <script src="js/flexible.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- <object data="https://testfile.anpxd.com/group1/M00/00/15/wKgAw1w9NAGASI5MAAWLJdf-yH8020.pdf" type="application/pdf" width="140" height="140">
    <object data="https://testfile.anpxd.com/group1/M00/00/15/wKgAw1w9Ne2AVQtxAACVulhokMM135.pdf" type="application/pdf" width="140px" height="140px" /> -->
</head>
<style>
html,body{
    padding: 0;
    margin:0;
    background-color: #eee;
}
.warp{
    width: 500px;
    height: 150px;
    background-color: gray;
    overflow: hidden;
    position: relative;
}
.app{
    position: absolute;
    left: 0;
    top: 0;
    width: 2000px;
    height: 150px;
    z-index: 10;
}
.con{
    width: 150px;
    height: 150px;
    float: left;
    margin-right: 20px;
}
.con1{
    width: 200px;
    height: 150px;
}
.test:hover{
    left: 50px;
}
</style>

<body>
    <div class="warp">
        <div id="app" class="app">
            <div class="con" style="background-color: green;"></div>
            <div class="con" style="background-color: red;"></div>
            <div class="con con1" style="background-color: yellow;"></div>
            <div class="con con1" style="background-color: blue;"></div>
        </div>
    </div>
    <script>
    $(function(){
        //setInterval(moveChild, 3000)
        function moveChild() {
            var firstEleChild = $(‘.con‘)[0]
            console.log(firstEleChild.offsetWidth)
            console.log(parseInt(window.getComputedStyle(firstEleChild).marginRight))
            let firstEleChildWidth = firstEleChild.offsetWidth
            let firstEleChildMR = parseInt(window.getComputedStyle(firstEleChild).marginRight)
            let needLeft = firstEleChildWidth + firstEleChildMR
            $(‘#app‘).animate({
                left: -needLeft
                },
                500, function() {
                $(‘#app‘).append(firstEleChild)
                $(‘#app‘).css(‘left‘,0)
            });
        }
        function jsMove () {
            var parentEle = document.getElementById("app");
            var firstEleChild = document.getElementsByClassName("con")[0];
            let firstEleChildWidth = firstEleChild.offsetWidth
            let firstEleChildMR = parseInt(window.getComputedStyle(firstEleChild).marginRight)
            let needLeft = firstEleChildWidth + firstEleChildMR
            let duraTime = 500;
            let sped = needLeft/duraTime*10;
            let alLeft = 0;
            var timer = setInterval(function(){
                alLeft += sped
                if (alLeft >= needLeft) {
                    clearInterval(timer)
                    alLeft = needLeft
                    parentEle.style.left = -alLeft + ‘px‘
                    parentEle.appendChild(firstEleChild)
                    parentEle.style.left = 0
                } else {
                    parentEle.style.left = -alLeft + ‘px‘
                }

            },10)

        }
        setInterval(jsMove, 3000)
    })
    </script>
</body>

</html>

以上是关于一个简单的滑动溢出效果的主要内容，如果未能解决你的问题，请参考以下文章

html导航菜单溢出，想搞个可以左右滑动的菜单，请各位大侠帮帮忙！