欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享_jquery

程序员文章站 2022-05-06 19:21:55
...
多的不说了,直奔主题,分享一个放大效果的popup dialog,项目中可以根据自己的需求来写css,我打算复用到metro风格的site上去。

看起来动画效果还是比较cool的,如果加上了处理后的效果更佳:
复制代码 代码如下:






");
var $t = $('#transition'),
to = $(this).offset();
var height = $(document).height();
var width = $(document).width();
$('#content').css({ width: 100, height: 100 });
$t.css({
top: to.top + 50,
left: to.left + 50,
display: 'block'
}).animate({
top: height / 2,
left: width / 2
}, 600, function () {
$(this).animate({
top: 125,
left: 175
}, 600);
$('#content').animate({
width: width * 0.8,
height: height * 0.8
}, 600, function () {
// open dialog here
$("#content").html("
Hello, please put content here.
");
});
});
});
$('#transition').click(function (e) {
$("#transition").hide();
$("#mask").hide();
});
});





  • thumb

  • thumb

  • thumb

  • thumb

  • thumb

  • thumb

  • thumb

  • thumb

  • thumb



Loading....