对话框缩放效果jQuery [英] dialog zoom effect jquery

问题描述

是否可以为jquery中的对话框重新创建类似缩放的效果，而无需下载灯箱插件?

is it possible to re-create a zoom-like effect for dialogs in jquery without needing to download a lightbox plugin?

我想在我的对话框中添加动画，以模拟发现的缩放"效果在该页面上，当您单击其中一张图像时.

i'd like to add animation to my dialogs to simulate the "zoom" effect found on this page when you click on one of the images.

不需要其他插件，是否可以使用jQuery开箱即用?是否希望能够使对话框(模态)从用户单击(例如按钮或链接)到具有适当内容的较大容器的屏幕上的特定点进行动画制作-缩放叠加效果?

without needing yet another plugin, can this be done with jQuery out of the box? would love to be able to have dialogs (modal) animate from a specific point on the screen which the user has clicked (say a button or link) into a bigger container with the appropriate content - a zoom overlay effect?

非常感谢您的帮助...

any help is greatly appreciated...

 $(function() {
        $("#testdialog").dialog({
            autoOpen: false,
            minWidth: 425,
            minHeight: 300,
            position: ['center', 115],
            resizable: false,
            modal: true
        });
         $("#opener").click(function () {
            $("#testdialog").dialog("open").position();
            return false;
        });
 });

[div id ="testdialog"]这里的一些内容[/div]

[div id="testdialog"] some content here [/div]

[input type ="button" id ="opener"/]

[input type="button" id="opener" /]

推荐答案

请在此处查看以下示例.

完成此操作的一种方法是执行所需的过渡，然后在动画结尾处的回调函数中打开对话框.因此，假设您有一个大小相等的缩略图的无序列表，可以将div设为一个白框，然后使用jQuery将其定位在您单击的任何缩略图上.然后，您将朝着视口的中心开始制作动画，并可能调整div的大小，然后在此动画末尾的回调中，可以以编程方式启动对话框.我对jQuery UI对话框不太熟悉，因此您必须阅读API文档以了解如何执行此操作.

One way you can accomplish this is to perform the transition you desire and then open the dialog in the callback function at the end of the animation. So, let's say you have an unordered list of equal sized thumbnails, you can make a div that's a white box and use jQuery to position it over whichever thumbnail you click. You'd then begin an animation towards the center of the viewport, and perhaps resize the div, and then in the callback at the end of this animation you can launch the dialog pro grammatically. I'm not too familiar with jQuery UI dialog, so you'll have to read the API docs for how to do this.

$('ul li').click(function(e) {
  var $t = $('#transition'),
    to = $(this).offset(),
    td = $(document);

  $t.children('div').css({
    width: 100,
    height: 100
  });
  $t.css({
    top: to.top + 50,
    left: to.left + 50,
    display: 'block'
  }).animate({
    top: td.height() / 2,
    left: td.width() / 2
  }, 600, function() {
    $(this).animate({
      top: '-=75',
      left: '-=50'
    }, 600);
    $(this).children('div').animate({
      width: 250,
      height: 200
    }, 600, function() {
      // open dialog here
    });
  });
});

$('#transition').click(function(e) {
  $(this).hide();
});

body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }

ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; }

#transition {
    background:transparent;
    display:none;
    position:absolute; top:50%; left:50%; z-index:50;
}
#transition > div {
    background:#fff;
    border:1px solid #666;
    margin:-50px 0 0 -50px;
    width:100px; height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
  <li>thumb</li>
</ul>
<div id="transition">
  <div>zoom effect
    <div></div>

这篇关于对话框缩放效果jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！