jQuery slideDown（） - 绝对定位div从页面顶部向下滑动，需要从页面上的特定区域滑动 - 如何？
[英]jQuery slideDown() - absolute positioned div sliding down from top of page, need to slide from specific area on page - how?
问题描述
I'm creating a website where the homepage has an image of a house. 
我正在创建一个网站，主页上有一个房子的图像。 The house has a few windows and a door. 房子有几扇窗户和一扇门。 When a user clicks on a particular window, a <div> pops up with some text. 当用户单击特定窗口时，会弹出一些带有文本的<div> 。 The door has the same functionality, only I would like for the <div> that pops up to having a 'sliding down' effect and I want the position of this <div> to be beneath the door. 门具有相同的功能，只有我想要的<div>弹出一个'向下滑动'效果，我希望这个<div>的位置在门下。 So the <div> would slide down/expand from where the door is positioned. 所以<div>会从门的位置向下滑动/展开。
I'm using jQuery's slideDown() method , but the result I'm getting is that the 'pop up div' is sliding down from the top of the page, and not from the absolute positioned <div> which represents the door on the image. 我正在使用jQuery的slideDown（）方法 ，但我得到的结果是'pop up div'从页面顶部向下滑动，而不是从绝对定位的<div> ，它代表了图片。
A snippet of my code is posted below. 我的代码片段发布在下面。
How can I get the results I'm looking for? 我怎样才能得到我正在寻找的结果？
Here is the code on JsFiddle - 这是JsFiddle上的代码 -
jsfiddle.net/katura99/A36Fw
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"> <!-- POEM --> <div id="Poem" align="center"> <div rel="scrollcontent1"> Content text here </div> <div id="Close" onclick="closeDiv('Poem')"></div> </div> <div id="spacer"> </div><img src="PNG/MyLogo.png"/> <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>
1 个解决方案
解决方案1
4 已采纳 2012-03-19 17:04:18
See the below fiddle for your solution 请参阅以下小提琴，了解您的解决方案
Fiddle: http://jsfiddle.net/A36Fw/2/ 小提琴： http ： //jsfiddle.net/A36Fw/2/
Demo: http://jsfiddle.net/A36Fw/2/embedded/result/ 演示： http ： //jsfiddle.net/A36Fw/2/embedded/result/
Note: you can adjust the position of left and top of poem div as per your need. 注意：您可以根据需要调整诗歌div的左侧和顶部位置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.