<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function () {
$('input[name=name]').click(function () {
$('#test').CloseDoor(5);
});
$('input[name=hide]').click(function () {
$('#test').OpenDoor(5);
});
//上下同时关门效果
//1.div标签内容永远上下居中 (父元素要有line-height,然后子元素要display成inline-block)
$.fn.CloseDoor = function (time) {
//动态生成一个占位层
$('<div id="perchDiv" style="height:' + $(this).height() + 'px"></div>').insertAfter(this);
var closeTarget = $(this);
//设置本层和包裹层的相对定位
closeTarget.css('position','absolute').children().first().css('position', 'relative');
//2.减少高度的同时,绝对定位跟随
var childtop = 0;
var intervalid = window.setInterval(function () {
if (closeTarget.height() > 0) {
childtop -= 1;
//一边移动图片,一边移动层,一边缩小层
closeTarget.css({ 'height': (closeTarget.height() - 2) + 'px', 'top': (closeTarget.offset().top + 1) + 'px' }).children().css('top', childtop +'px');
}
else {
window.clearInterval(intervalid);
//隐藏占位层
closeTarget.next().remove();
}
}, time);
};
$.fn.OpenDoor = function (time) {
var closeTarget = $(this);
closeTarget.css('display', 'relative').children().first().css('display', 'relative');
//建立一个占位层
$('<div id="perchDiv" style="height:' + $(this).children().first().height() + 'px"></div>').insertAfter(this);
//开关门效果里面,所有的子元素必须放在一个层里面包裹起来,因为要用到相对定位
var childtop = Number( $(this).children().first().css('top').match(/[-]*\d+/)[0]);
var intervalid = window.setInterval(function () {
if (closeTarget.height() <= $(this).children().first().height()) {
childtop += 1;
closeTarget.css({ 'height': (closeTarget.height() + 2) + 'px', 'top': (closeTarget.offset().top - 1) + 'px' }).children().css('top', childtop + 'px');
}
else {
closeTarget.next().remove();
//清空css设置
closeTarget.css({ 'position': '', 'height': '', 'top': '' }).children().first().css({ 'position': '', 'top': '' });
//停掉计时器
window.clearInterval(intervalid);
}
}, time);
};
});
</script>
<style type="text/css">
#test {
overflow:hidden;
}
</style>
</head>
<body>
<input type="button" name="name" value="开始" /><input type="button" name="hide" value="隐藏" />
<input type="button" name="oneBtnCtrl" value="一键控制" />
<div id="test">
<div id="firstChild"> <img src="img/1.jpg" /> </div>
</div>
<div> 1223456</div>
</body>
</html>
jQuery关门动画效果
最新推荐文章于 2022-05-09 18:21:40 发布