有一种放大的效果怎么做

比如一个弹出层，由中心点向四周均衡放大，最后呈现一个300*300的div层最好是超出300*300一点点，再回到300*300状态这样比较动感，怎么做。？？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jquery 有很多这种插件的，你搜搜就能搜到了。
setTimeout中逐渐渐变DIV的长和宽，渐变时用CSS的Alpha滤镜，使得该层是半透明的
我先发个半成品给你看看吧。
等我做好了，再出成品。
你要的话，就提示我。
<html>
<head>
<style type="text/css">
#divShow
{
width:2px;
height:2px;
border-style:solid;
border-width:2px;
border-color:Blue;
background-color:#cddccd;
position:absolute;
top:500px;
left:500px;
}
</style>
<title>IE Crasher</title>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<script  type="text/javascript">
var exceed=false;//标志位。
var speedTimer=false;
var sLeft=200;
var sTop=200;
var ToWidth=300;
var Toheight=300;
var overPx=50;
function divMoving(){
var _width=parseInt($("#divShow").css("width"));
var _height=_width;
var _top=parseInt($("#divShow").css("top"));
var _left=parseInt($("#divShow").css("left"));
if(!exceed)
{
_width+=2;
_height+=2
_top-=1;
_left-=1;
$("#divShow").css("width",_width.toString()+"px");
$("#divShow").css("height",_height.toString()+"px");
$("#divShow").css("left",_left.toString()+"px");
$("#divShow").css("top",_top.toString()+"px");
if(_width>ToWidth+overPx)//最大超出50
{
exceed=true;
}
}
else {
if(_width>ToWidth)
{
_width-=2;
_height-=2
_top+=1;
_left+=1;
$("#divShow").css("width",_width.toString()+"px");
$("#divShow").css("height",_height.toString()+"px");
$("#divShow").css("left",_left.toString()+"px");
$("#divShow").css("top",_top.toString()+"px");
}
else
{
exceed=false;
if(speedTimer)
{
clearInterval(speedTimer);
speedTimer=false;
}
}
}
}
$(function(){
$("#btnShow").click(function(){
if(speedTimer)
{
clearInterval(speedTimer);
speedTimer=false;
$("#divShow").css("width","300px");
$("#divShow").css("height","300px");
$("#divShow").css("left",sLeft.toString()+"px");
$("#divShow").css("top",sTop.toString()+"px");
}
else{
exceed=false;
$("#divShow").css("width","0px");
$("#divShow").css("height","0px");
//top:200px;
//left:200px;
$("#divShow").css("left",(ToWidth/2+sLeft).toString()+"px");
$("#divShow").css("top",(Toheight/2+sTop).toString()+"px");
speedTimer = setInterval(function (){
divMoving();
},2);
}
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btnShow" value="你点下就知结果了" />
<div id="divShow">

</div>

</div>
</body>
</html>
在firefox 里要快得多。建用firefox 。
用我这个试试看：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title></head>
<script>
var dv;
var ln=0;
var step=6;
var tm=60;
var ok=false;
function clickButton()
{
dv=document.getElementById("myDiv");
dv.style.top= "300px";
dv.style.left= "300px";
ln=0;
ok=false;
changeDiv();
}
function changeDiv(){
if(ln<320&&!ok)
{ln+=step;
dv.style.top=parseInt(dv.style.top)-step/2+"px";
dv.style.left=parseInt(dv.style.left)-step/2+"px";
dv.style.width=ln;
dv.style.height=ln;

setTimeout('changeDiv()',tm);
}else
{
ok=true
if(ln>300)
{
ln-=step;
dv.style.top=parseInt(dv.style.top)+step/2+"px";
dv.style.left=parseInt(dv.style.left)+step/2+"px";
dv.style.width=ln;
dv.style.height=ln; setTimeout('changeDiv()',tm);
}
}}
</script>

<body>
    <form id="form1" runat="server">
<input type="button" value="click" onclick="clickButton()">
    <div id="myDiv" style="position:absolute;top:300px;left:300px;width=10px;height=10px;background-color:#333fff">


    </div>
    </form>
</body></html>
楼上的，这么懒啊，写好代码就不用调试一下，你都不知道是不是可以运行的。算我倒霉，帮你改了。
如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
</head><script type="text/javascript">
var dv;
var ln = 0;
var step = 6;
var tm = 60;
var ok = false;
function clickButton() {
dv = document.getElementById("myDiv");
dv.style.top = "300px";
dv.style.left = "300px";
ln = 0;
ok = false;
changeDiv();
}
function changeDiv() {
if (ln < 320 && !ok) {
ln += step;
dv.style.top = parseInt(dv.style.top) - step / 2 + "px";
dv.style.left = parseInt(dv.style.left) - step / 2 + "px";
dv.style.width = ln+ "px";
dv.style.height = ln+ "px"; setTimeout('changeDiv()', tm);
} else {
ok = true
if (ln > 300) {
ln -= step;
dv.style.top = parseInt(dv.style.top) + step / 2 + "px";
dv.style.left = parseInt(dv.style.left) + step / 2 + "px";
dv.style.width = ln+ "px";
dv.style.height = ln+ "px"; setTimeout(function() {
changeDiv();
}, tm);
}
} }
</script><body>
<form id="form1" runat="server">
<input type="button" value="click" onclick="clickButton();">
<div id="myDiv" style="position: absolute; top: 300px; left: 300px; width: 10px;
height: 10px; background-color: #333fff">
</div>
</form>
</body>
</html>
建议用css3样式 transform,ie9之前的ie用filter实现