Question

我正在创建一个网站，主页上有一个房子的图像。房子有几扇窗户和一扇门。当用户点击特定窗口时，会弹出<div>一些文字。门具有相同的功能，只有我希望<div>突然出现'向下滑动'效果，我希望此<div>的位置为在门下。因此，<div>会从门的位置向下滑动/展开。

我正在使用 jQuery的slideDown（）方法，但我得到的结果是'pop up div'从顶部向下滑动页面，而不是代表图像门的绝对位置<div>。

我的代码片段发布在下方。

如何获得我正在寻找的结果？

以下是JsFiddle上的代码 -

jsfiddle.net/katura99/A36Fw

     <html>
            <head>
<script src="JQuery/jquery-1.7.1.js"></script>

            <script>
            $('#door').click(function() {  
            $("#Poem").slideDown(3000);
            });
            </script>

            </head>

            <style type="text/css">
            .main {
                  width:100%;
            }

            .mainContentBox {
                  width:900px;
                  height:55px;
                  margin:auto;
                  margin-top:15px;
            }

            #Poem {
                  width:285px;
                  height:350px;
                  background:#ffffcc;
                  border:1px solid #cccccc;
                  position:absolute;
                  z-index:5;
                  margin-top:435px;
                  margin-left:312px;
            }

            #Close {
                  position:absolute;
                  top:0px;
                  right:15px;
                  color:blue;
                  cursor:pointer;
                  background: url('PNG/close.png');
                  width:36px;
                  height:36px;
        }   

        #HouseLogo {
        width:900px;
        height:721px;
        margin:auto;
        position:relative;
        margin-top:0px;
        background:url('PNG/HouseLogo.png') no-repeat;
        }

        #spacer {
        width:20px;
        float:left;
        }

        #mission {
        width:300px;
        height:80px;
        font-size:13px;
        font-weight:bold;
        color:#ffffff;
        bottom:390px;
        right:485px;
        position:absolute;
        }

        #window1 {
        width:37px;
        height:42px;
        bottom:388px;
        right:433px;
        position:absolute;
        cursor:pointer;
        }

    #door {
       width:37px;
       height:52px;
       bottom:336px;
       right:420px;
       position:absolute;
       cursor:pointer;
    }
            </style>


            <body>
            <div class="main">

            <!--main box -->
            <div class="mainContentBox">

            <!-- P O E M -->
            <div id="Poem" align="center">    
                     <div rel="scrollcontent1">
                     Content text here
                    </div>
                <div id="Close" onclick="closeDiv('Poem')"></div>
            </div>

              <div id="spacer">&nbsp;</div><img src="PNG/MyLogo.png"/>
              &nbsp;&nbsp;
              <img src="PNG/LogoSubText.png"/>
              </div>

            <div id="HouseLogo">    
              <div id="mission" style="">
              additional content here
              <br/><br/>
              <table align="center"> 
               <tr>
                <td style="font-size:13px;font-weight:bold;color:#FFFF00;">
                  <div id="showMissionStatement" style="cursor:pointer">... Click here to Learn More About Us!... </div>
               </td>
               </tr>
              </table>
            </div><!--HouseLogo-->


            <div id="window1" onmouseover="largeWindow('window1')" onmouseout="this.style.background='';">
             </div> 

    <div id="door" onmouseover="largeDoor()" onmouseout="this.style.background='';">

        </div>
        </div>

        </body>
        </html>

Answer 1

请参阅以下小提琴，了解您的解决方案

小提琴：http://jsfiddle.net/A36Fw/2/

演示：http://jsfiddle.net/A36Fw/2/embedded/result/

注意：您可以根据需要调整诗歌div的左侧和顶部位置。

jQuery slideDown（） - 绝对定位div从页面顶部向下滑动，需要从页面上的特定区域滑动 - 如何？

以下是JsFiddle上的代码 -

1 个答案: