JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享_jquery
- 原创
- 2016-05-16 17:35:01 1213浏览
多的不说了，直奔主题，分享一个放大效果的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();
});
});
加入了mask效果，如果不需要可以直接删掉。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
