js div鼠标滑动显示隐藏

JavaScript020

js div鼠标滑动显示隐藏,第1张

一个div的鼠标滑过隐藏后,就再也滑不上了。因为页面已经看不见它了。

所以应该鼠标滑过一个div,让另一个div显示和隐藏,下面是简单代码,仅供参考:

<style>

    div {width:100px height:100px background:#cccmargin:10px}

</style>

<body>

    <div id='div1'></div>

    <div id='div2'></div>

</body>

<script>

    var oDiv1 = document.getElementById('div1')

    var oDiv2 = document.getElementById('div2')

    oDiv1.onmouseover = function(){

        oDiv2.style.display = 'none'

    }

    oDiv1.onmouseout = function(){

        oDiv2.style.display = 'block'

    }

</script>

你这个问题是移动端拖动页面的时候有scroll回弹的现象,就是拖动的时候会有点弹性。也可以做delay来处理,不过感觉会卡卡的。

最好是加上到顶判断。因为这个到顶的值会小于0

<script>

    if (scrolls <= 0) { // 处理回弹

        return

    } else {

        // 要从这里开始做正事

        if (scrolls >= windowTop) {

            // balabal

        } else {

            // balabal

        }

    }

</script>

这是自己封装的原生js方法,为了偷懒,用了电jqurey。调用方法如下:

touchs._left(object)//往左滑动,

touchs._right(object)//往右滑动

touchs._top(object)//往上滑动

touchs._bottom(object)//往下滑动

说明:object的取值可以是一个id("#id")表达式,或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等,只要可以用jqurey通过这个表达式获取到dom对象,这个表达式怎么写都可以。