从单击的div中心将弹出窗口缩放到中心屏幕 [英] Zoom pop-up to center screen from center of clicked div
问题描述
对于jQuery和其他所有应用程序我都是新手,如果我在任何地方都做错了,请原谅我.
I am new for jQuery and all, forgive me If I am wrong anywhere.
我有一个要求,即有多个可点击的框,当您单击任何框时,它会像弹出窗口一样打开,但是以这种方式看起来好像是从那个特定的被单击框出来的,并且如果您要关闭打开的弹出窗口,它将缩小到被单击的框(看起来就像在被单击的框内一样)
I have a requirement, that there are multiple click-able boxes, as soon as you click on any box it will open like pop-up but in such a manner It will look like it is coming out from that particular clicked box, and if you will close the opened pop-up, it will shrink to the clicked box(look like it is going inside the clicked box)
推荐答案
对于jQuery新手来说,这是一个复杂的问题,但这是一个解决方案.
This is a bit of a complex question for a jQuery novice, but here is a solution.
注意:匆匆忙忙,暂时没有时间来计算正确的坐标,以将弹出框的死点定位在屏幕上-此示例放置了框的死点的上/左角屏幕上.我留给您算出将框的中心放在屏幕中心的坐标-,如果您在解决方案中留下评论,并附带指向修订的jsFiddle的链接,我将不胜感激.
Caveat: In a rush and don't have time just now to calculate the correct coords to position the pop-up box dead center of screen - this example puts the top/left corner of the box dead center of screen. I leave it to you to work out the coordinates to put center of box in center of screen -- and I would appreciate it if you would leave a comment with link to revised jsFiddle with your solution.
var xx, yy, mPos = { x: -1, y: -1 }; //mouse position
$(document).mousemove(function(event) {
mPos.x = event.pageX;
mPos.y = event.pageY;
});
$('.dd').click(function(){
xx = mPos.x;
yy = mPos.y;
$('#msg').css({top:mPos.y+'px',left:mPos.x+'px'}).animate({
height: '400px',
width: '500px',
left: $(window).width() / 2,
top: $(window).height() / 2
},500,function(){
//use a callback to show overlay ONLY when animation finished
$('#overlay').show();
});
});
$('#msg').click(function(){
$('#overlay').hide();
$('#msg').animate({
height: '0px',
width: '0px',
left: xx+'px',
top: yy+'px'
},500);
});
#overlay{position:absolute;top:0;left:0;height:100%;width:100%;background:black;opacity:0.7;z-index:1;display:none;}
#msg{position:absolute;height:0;left:0;background:wheat;overflow:hidden;z-index:2;}
.dd{height:30px;width:100px;margin:30px;padding-top:25px;border:1px solid orange;}
.clickable{cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="overlay"></div>
<div id="msg">Click on me to minimize again</div>
<div id="d1" class="dd clickable">Div One</div>
<div id="d2" class="dd clickable">Div Two</div>
<div id="d3" class="dd clickable">Div Three</div>
<div id="d4" class="dd clickable">Div Four</div>
这篇关于从单击的div中心将弹出窗口缩放到中心屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!