创建一个类似Jquery动画的Flipboard弹出窗口
Create a Jquery animation like Flipboard popup
我想实现一个Jquery/JS动画,就像Flipboard弹出动画一样。
当用户点击图像时,图像会扩展到一定的大小,其白色背景会扩展到占据整个屏幕。
动画完成后,将加载页面内容。http://flipboard.com/
如有任何帮助,我们将不胜感激。
非常感谢!
Codrops几个月前就做了,我真的不能在这里为您写出所有的代码,但请阅读本文。
<script>
//最后我找到了答案。这是完整的代码。
$(document).ready(function() {
$('.box').click(function(e){
if( $('div').hasClass('overlay')==false ){
//event.preventDefault();
var $box = $(this);
$('<div class="overlay"></div>').prependTo($box);
var $overlay = $('.overlay');
$overlay.css( {
'position' : 'absolute',
'background-color' : 'white',
'width' : $box.outerWidth(true),
'height' : $box.outerHeight(true),
'left' : $box.offset().left,
'top' : $box.offset().top,
'z-index' : 99999999
});
//$($placeholder).insertAfter('.box');
$overlay.animate({
width: $(document).width(),
height: $(document).height(),
left: '0px',
top: '0px'
}, 500, function() {
//reset the overlay
$overlay.css({'width': ''});
$overlay.css({'height': '1500px'});
//ajax
$.ajax({
type: "POST",
url: "../ajax/get_event.php",
data: "firstname=clint&lastname=eastwood",
success: function(resp){
// we have the response
$overlay.html(resp);
$('.window').fadeIn(200);
},
error: function(e){
alert('Error: ' + e);
}
});
});
}else{
//click only on overlay to exit
var $target = $(e.target);
if ( $target.is('.overlay') ) {
$('.overlay').remove();
}
}
});//end box click
});//end of jquery
</script>
Codrops刚刚发布了一个插件来实现这一点,以及如何使用它的说明。这里有一个特别酷的插件演示。
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用jQuery在动画中期加速动画
- 使用数据上的角度更改设置集合的第一个元素的动画
- 如何使用css动画/javascript使具有背景图像的元素出现
- 如何使用css动画从中心增加边界线
- JQuery动画延长容器不起作用
- 动画CSS进度条
- JavaScript动画从不执行
- 更多延迟动画
- 使用jQuery制作伪元素的动画
- 创建一个类似Jquery动画的Flipboard弹出窗口