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

样式：<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);}