如何用Jquery实现DIV由中间向两边展开的效果
如何用Jquery实现DIV由中间向两边展开的效果，有三个div，当鼠标放在中间的div上，两边的div从隐藏慢慢向两边展开，怎么写...
如何用Jquery实现DIV由中间向两边展开的效果，有三个div，当鼠标放在中间的div上，两边的div从隐藏慢慢向两边展开，怎么写
展开
4个回答
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码长,性能也不好。。。。
纯CSS可以达成的效果，不用JS做的~
不知道你要的是不是这个效果，你看一下吧，
正好我自己有需要，随便写了一个~
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>两边展开</title>
<style>
.center {
position: relative;
width: 500px;
height: 500px;
margin: 200px auto;
background: #f00;
}
.left,.right {
position: absolute;
top: 0;
width: 500px;
height: 500px;
transform: scaleX(0);
transition: transform 300ms;
}
.left {
background: #0f0;
right: -500px;
transform-origin: left center;
}
.right {
background: #0ff;
left: -500px;
transform-origin: right center;
}
.center:hover .left,
.center:hover .right {
transform: scaleX(1);
}
</style>
</head>
<body>
<div class='center'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没有分吗？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不清楚你的问题，什么叫两边的DIV从隐藏慢慢向两边展开啊？你的DIV之前是隐藏的？能画个图出来吗？
更多追问追答
追问
让id=casefirstleft,id=casefirstright这俩个div张开，
最后变成这样
追答
给我网址我自己看吧~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
