如何用Jquery实现DIV由中间向两边展开的效果
有三个div,一个div显示，另外俩个隐藏，当鼠标放上后，两个隐藏的div慢慢向两边展开，怎么用jquery实现，要具体...
有三个div,一个div显示，另外俩个隐藏，当鼠标放上后，两个隐藏的div慢慢向两边展开，怎么用jquery实现，要具体
展开
2个回答
展开全部
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: 0;
vertical-align: baseline;
}
body {
overflow: hidden;
}
div {
height: 500px;
text-align: center;
line-height: 500px;
margin: auto;
cursor: pointer;
border: 1px solid black;
top: 0px;
font-size: 100px;
}
div.center {
width: 300px;
background-color: blue;
}
div.left,div.right {
position: absolute;
display: none;
}
div.left {
float: left;
background-color: orange;
}
div.right {
float: left;
background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
{
var doms = init ();
var center = doms[1], left = doms[0], right = doms[2];
var width = center.width();
center.hover (function ()
{
left.show ().stop ().animate (
{
width : width + "px"
}, "slow");
right.show ().stop ().animate (
{
width : width + "px"
}, "slow");
}, function ()
{
left.stop ().animate (
{
width : "0px"
}, "slow", function ()
{
left.hide ();
});
right.stop ().animate (
{
width : "0px"
}, "slow", function ()
{
right.hide ();
});
});
});
$(window).resize (function ()
{
init ();
});
var init = function ()
{
var sw = screen.availWidth, sh = screen.availHeight;
var left = $ ("div.left").height(sh + "px"),
center = $ ("div.center").height(sh + "px"),
right = $ ("div.right").height(sh + "px");
center.width (sw / 3 + "px");
var w = center.prop ("offsetLeft");
var width = sw / 3;
left.css ("right", width + w + "px");
right.css ("left", width + w + "px");
return [left, center, right];
}
</script>
</head>
<body>
<div class="left">鬼</div>
<div class="center">门</div>
<div class="right">关</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
