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("
});
});
});
$('#transition').click(function (e) {
$("#transition").hide();
$("#mask").hide();
});
});
看起来动画效果还是比较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();
});
});
上一篇: javascript常用对话框小集_javascript技巧
下一篇: 关于文本留言本的分页代码