1. 首页
  2. 问题列表
  3. javascript function mOver(obj)应用程序
提问者：小点点

javascript function mOver(obj)应用程序


嗨：我在wordpress上做一个站点，我需要两段代码，一直给我带来困难。我知道这很容易，但我不能让它奏效。

>

  • 我需要使当鼠标移过（或进入）三个图像中的任何一个时，图像会改变（幻灯片）为另一个带有说明性文本的图像。我怎样才能包括图像到这个示例代码和作为图像在链接波纹管？ 

    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

    鼠标放在更改内容上http://www.nrgtechnologies.com.au/moreimages/plain-2.jpg

    • 与水平菜单的效果也非常相似，该菜单在鼠标移过的3或4个菜单元素之间具有滑动过渡，根据链接波纹管上的图像。

    鼠标放在滑动菜单和内容上：http://www.nrgtechnologies.com.au/moreimages/plain-1.jpg

    谢谢你的帮助


    • 共1个答案

    匿名用户

    请看下面的脚本：

        <!DOCTYPE HTML>
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
        .slide {
            background-image: url(plain-2.jpg);
            width: 295px;
            height: 220px;
            -webkit-transition: background-position .5s ease-in-out;
        }

        .slide-1 {
            background-position: -30px -215px;
            -webkit-transition: background-position .5s ease-in-out;
        }

        .slide-2 {
            background-position: -354px -215px;
            -webkit-transition: background-position .5s ease-in-out;
        }

        .slide-3 {
            background-position: -675px -215px;
            -webkit-transition: background-position .5s ease-in-out;
        }

        .moz-over {
            background-color: #ccc;
        }
    </style>
    </head>
    <body>
    <div id="images" class="slide slide-1">

    </div>
    <span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-1</span>
    <span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-2</span>
    <span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-3</span>


    <script type="text/javascript">
        var mozOver = function(target) {
            target.className = "moz-over";
            var images = document.getElementById("images");
            images.className = "slide " + target.innerHTML;
        };

        var mozOut = function(target) {
            target.className = "";
        };

    </script>
    </body>
    </html>

    我不确定你是否想要。逻辑如上。

    相关问题