JavaScript通过简单的封装实现图片滑过换图事件

Posted 2020-07-13

样式：
<style>
    .nodeSmall {
        width: 50px;
        height: 50px;
        background: url(#) no-repeat -150px -50px;
        position: fixed;
        right: 10px;
        top: 50%;
    }
    .picture{
        position: absolute;
        top: 0;
        left: -150px;
    }
    .nodeSmall a {
        display: block;
        width: 50px;
        height: 50px;
    }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }
</style>

结构图：
<div class="nodeSmall" id="node_small">
    <a href="#"></a>

    <div class="picture hide" id="er">
        <img src="#" />
    </div>
</div>
方法对比：
box.onmouseover = function () {

    //显示图片 设置picture的类名为show

    //要做到仅仅是把show和hide做一个切换
    //picture.className = "erweima show";
    //现在是隐藏的 想让他显示
    //picture.className = er.className.replace("hide", "show");
    replace(picture, "hide", "show");
}
　　//鼠标离开盒子 隐藏二维码
box.onmouseout = function () {
    //隐藏二维码 设置er的类名为hide
    //er.className = "erweima hide";
    //er.className = er.className.replace("show", "hide");
    replace(picture, "show", "hide");
}

自己写封装好的js代码:

function replace(element, oldStr, newStr) {
    element.className = element.className.replace(oldStr, newStr);
}