我想用id =“banner”滑动div？

时间：2014-01-20 16:37:56

标签： jquery css html

我希望点击箭头发光图像，隐藏apDiv1，页面上的横幅从右向左滑动。我应该添加哪些库，还要添加jqueryui库，它说“jquery未定义”？我是jquery的新手，请提供帮助，让我知道我的代码中的变化... 提前谢谢

http://jsfiddle.net/UVZw2/

html{
    height: 100%;
}
body {
    margin:0;
    padding:0;
    background-color:Silver;
}

#apDiv1 {
    position: absolute;
    width: 800px;
    z-index: 1;
    padding: 0;
    display:block;
    color:#FFF;
    left: 0px;
}
#apDiv2 {   
    min-width: 800px;
    width: 100%;
    position: absolute;
    visibility: visible;
    padding: 0;
}
#fontmain {
    font-size:250px;
    margin-left:400px;
    padding: 0;
}
#fonttag {
    font-size:30px;
    margin-left:480px;
    padding: 0;
}

#apDiv3 {
    margin-top:260px;
    font-size:90%;
    margin-left:500px;
}
#apDiv4 {
    margin-top:250px;
    margin-left:1080px;
}

#banner {
    margin-top:100px;
    margin-left:175px;
    background-color:Transparent;
    display:none;
    z-index:1;
    position:relative;
}
#bannerbg {
    width:930px;
    height:380px;
    margin-top:10px;
    margin-right:10px;
    display:block;
    background-color:Teal;
    z-index:-1;
    position:absolute;
}
#left {
    z-index:3;
    margin-left:9px;
    margin-top:280px;
    position:absolute;
}
#right {
    z-index:3;
    position:absolute;
    margin-top:280px;
    margin-left:819px
}
#bot {
    position:absolute;
    top:0px;
    left:0px;
}

<script>
    $(document).ready(function(){
        $("#apDiv4").click(function(){
        $("#apDiv1").hide();
        // Set the effect type
        var effect = 'slide';

        // Set the options for the effect type chosen
        var options = { direction: 'left' };

        // Set the duration (default: 400 milliseconds)
        var duration = 900;
        $( "#banner" ).show( "slide")
    });
});


    // function vb()
    //{
    //document.getElementById("apDiv1").style.display="none";
    //document.getElementById("banner").style.display="block";
    //}
</script>
<link rel="stylesheet" href="frontpage.css">
</head>
<body>
    <form>
        <div id="apDiv1">
            <div id="apDiv2">
                <div id="fontmain">xyzef</div>
                <div id="fonttag">kljjhfghjkk</div>
                <div id="apDiv3">Copyright © 2014 ___________.All rights reserved.</div>
            </div>
            <div id="apDiv4">
                <img src="icons/next-arrow-glow.png" width="200" height="200">
            </div>
        </div>
        <div id="banner"><img id="bot"src="icons/dark_slider_frame.png"/>
            <img id="left" alt="previous" src="icons/left.png"/>
            <img id="right" alt="next" src="icons/right.png"/>
            <div id="bannerbg"></div>
        </div> 
    </form>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

修改

检查更新的Fiddle example

我刚刚将位置添加到.banner选择器并将jQuery更改为：

 $(document).ready(function(){
        $("#apDiv4").click(function(){
        $("#apDiv1").hide();
         $("#banner").show().animate({'right': '0'},900);
    });
});

完整的CSS更新灵活性

html{
height: 100%;

}
html, body {
    margin:0;
    padding:0;
     background-color:Silver; width:100%; height:100% 
}
.container{ max-width:80%; width:80%; height:800px; position:relative; margin:0px auto; overflow-x:hidden;}
#apDiv1 {
    position: relative;
    width: 80%;
    z-index: 1;
    padding: 0;
    display:block;
    color:#FFF;
    margin:0px auto;

}
#apDiv2 {   
    min-width: 800px;
    width: 100%;
    position: relative;
    visibility: visible;
    padding: 0;
}
#fontmain {
    font-size:250px;
    margin:0px auto;
    padding: 0;
}
#fonttag {
    font-size:30px;
    padding: 0;
}

#apDiv3 {
    margin-top:260px;
    font-size:90%;
    margin:0px auto;
}
#apDiv4 {
    margin-top:250px;
    float:left; margin:0 30px 0 0;
}

#banner {
    margin-top:100px;
    margin-left:0;
    width:100%!important;
    background-color:Transparent;
    display:none;
    z-index:1;
    position:relative;
    right:-100%;    
}
#bannerbg {
    width:100%;
    height:380px;
    margin-top:10px;
    margin-right:10px;
    display:block;
    background-color:Teal;
    z-index:-1;
    position:relative;

}
#left {
    z-index:3;
    left:28px;
    position:absolute;
    bottom:50%;
}
#right {
    z-index:3;
    position:absolute;
    margin-top:280px;
    right:20px;
    bottom:50%;
}
#bot {
    position:absolute;
    top:0px;
    left:0px;
}

在动画div

周围添加了容器

<div class="container">
    <div id="banner"><img id="bot"src="icons/dark_slider_frame.png"/>
        <img id="left" alt="previous" src="icons/left.png"/>
        <img id="right" alt="next" src="icons/right.png"/>
        <div id="bannerbg"></div>
    </div> 
</div>