Question

我想将此滑块放在slideDown（）函数中，这样当文本悬停时，滑块应该会关闭。

我已经提供了我尝试使用的代码段，它包含了javascript，css，body。

    <script> 

    var $ = function (id) {
    return document.getElementById(id); 
}


var swapImage = function (){

if($("image1").title=="image1")
{
    $("image1").src="/static/img/new_desserts/two.jpg";
    $("image1").title="image2";
}
else if($("image1").title=="image2")
    {
        $("image1").src="/static/img/new_desserts/teen.jpg";
        $("image1").title="image3";
    } 
else if($("image1").title=="image3")
    {
        $("image1").src="/static/img/new_desserts/some.jpg";
        $("image1").title="image4";
    }
else if($("image1").title=="image4")
    {
        $("image1").src="/static/img/new_desserts/set.jpg";
        $("image1").title="image5";
    }
else if($("image1").title=="image5")
    {
        $("image1").src="/static/img/new_desserts/cake.jpg";
        $("image1").title="image1";
    }
    setTimeout(swapImage, 5000);
}

window.onload = function () {
   /*  $("calculate=").onclick = function(){calculate();} */

   swapImage();
}

$(document).ready(function(){

          $("#prj_1").mouseover(function(){
            $("#image").stop().slideDown("slow");
    });


});
</script>

<style>
            #prj_1{
                position:absolute;
                top:1%;
                left:50%;
                width:1230px;
                height:200px;
                font-family:Andalus;
                font-size:20px;
                color:gold; 
            }
            #image{
                position:absolute;
                top:3%;
                left:25%;
                width:700px;
                height:300px;
                display:none;   
                background-color:red;
            }
</style>

<body>
        <div id="prj_1">AAA Laundry</div>

         <div id="image">
                <img id="image1" src="/static/img/new_desserts/glass.jpg" title="image1" />
        </div>


    </div>

</body>

如果我删除其工作的slideDown代码，否则不会。请帮忙。

Answer 1

我稍微修改了你的代码并使用了JQuery而不是Javascript，您也使用了window.onload和$(document).ready，其目的几乎相同。

请查看此演示并查看是否符合您的要求： -

http://jsfiddle.net/d3rtcyxn/

我想在slidedown div中放一个滑块

1 个答案: