一个js弹出层问题,不使用插件。。 比如有A点坐标(10,10),点击从这个点弹出一个屏幕中心点div,大小100*100,状态是宽度、高度都是从0~100变化,再点击关闭,从屏幕中心点回到(10,10),状态为100~0,难不难??? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 先设置好预定DIV的TOP 和LEFT (10,10)有两种解决方法 一种是 用JS定时器 每隔一段时间间隔 DIV的Width+1或-1 (+-几都无所谓 值小看起来效果平滑些)还有一种是比较不推荐的FOR循环 原理一样 但是这个效果肯定不如定时器的效果好 今天没太多时间 要不然给你敲一个出来了 呵呵 LZ自己研究研究吧 不难 仅分析原理其实JS动画一般就是考虑起点状态和终点状态 所需要进行动画的元素的各个属性值的变化。按你的要求 其实有两种状态变化需要实现 一个是方框由 w:0 h:0 到w:100 h:100的一个变换 另一个是方框的中心点 从你描述的点A(Xa,Ya)到屏幕中央的坐标位置C(Xc,Yc)的变换。所以按上所述 其实方法就很显然了 具体代码我就不给出了 用JS的setInterval 每间隔一定时间调用变换函数 直到判断达到终点的状态后用clearInterval来清除动画事件 对JS写没自信的 可以用jQuery框架 其中有个animate函数就可以用来实现动画 会比较方便。 <HTML> <HEAD><script>var awidth=0;var aheight;function a(){document.getElementById("aa").style.display='block';if(parseInt(awidth)<100){awidth=document.getElementById("aa").style.width.substring(0,document.getElementById("aa").style.width.length-2);aheight=document.getElementById("aa").style.height.substring(0,document.getElementById("aa").style.height.length-2);awidth=parseInt(awidth)+5;aheight=parseInt(aheight)+5;document.getElementById("aa").style.width=awidth;document.getElementById("aa").style.height=aheight;t=setTimeout(a,1);}}function b(){if(parseInt(awidth)>0){awidth=document.getElementById("aa").style.width.substring(0,document.getElementById("aa").style.width.length-2);aheight=document.getElementById("aa").style.height.substring(0,document.getElementById("aa").style.height.length-2);awidth=parseInt(awidth)-5;aheight=parseInt(aheight)-5;if(awidth>0){document.getElementById("aa").style.width=awidth;document.getElementById("aa").style.height=aheight;}if(awidth<1){document.getElementById("aa").style.display='none';}t=setTimeout(b,1);}}</script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD> <BODY onLoad="a();"><div id="aa" style="position:absolute;top:10; left:10; background-color:#990000; width:0; height:0px; display:none" onClick="b()"></div> </BODY></HTML>忙里偷闲 忙一会写一会 代码很乱 反正效果有了 哈哈 《技术探讨》百度这种效果是如何用JS实现的? 高手请帮忙 javascript 获取客户端ip js控制select下拉菜单无法显示 很简单的问题 这段代码为什么不能执行呢 域加载函数 js怎么把if里的i值传到外面的i 使IE打印网页的时候,不打印页眉页脚等?如何做(程序实现而不是设置IE) 一个多选的问题 Google Chrome 浏览器淡入淡出滚动条的问题 js中的方法重写问题
其实JS动画一般就是考虑起点状态和终点状态 所需要进行动画的元素的各个属性值的变化。
按你的要求 其实有两种状态变化需要实现 一个是方框由 w:0 h:0 到w:100 h:100的一个变换 另一个是方框的中心点 从你描述的点A(Xa,Ya)到屏幕中央的坐标位置C(Xc,Yc)的变换。
所以按上所述 其实方法就很显然了 具体代码我就不给出了 用JS的setInterval 每间隔一定时间调用变换函数 直到判断达到终点的状态后用clearInterval来清除动画事件 对JS写没自信的 可以用jQuery框架 其中有个animate函数就可以用来实现动画 会比较方便。
<HEAD>
<script>
var awidth=0;
var aheight;
function a(){
document.getElementById("aa").style.display='block';
if(parseInt(awidth)<100){
awidth=document.getElementById("aa").style.width.substring(0,document.getElementById("aa").style.width.length-2);
aheight=document.getElementById("aa").style.height.substring(0,document.getElementById("aa").style.height.length-2);awidth=parseInt(awidth)+5;
aheight=parseInt(aheight)+5;document.getElementById("aa").style.width=awidth;
document.getElementById("aa").style.height=aheight;t=setTimeout(a,1);
}
}
function b(){if(parseInt(awidth)>0){
awidth=document.getElementById("aa").style.width.substring(0,document.getElementById("aa").style.width.length-2);
aheight=document.getElementById("aa").style.height.substring(0,document.getElementById("aa").style.height.length-2);awidth=parseInt(awidth)-5;
aheight=parseInt(aheight)-5;
if(awidth>0){
document.getElementById("aa").style.width=awidth;document.getElementById("aa").style.height=aheight;
}
if(awidth<1){document.getElementById("aa").style.display='none';}
t=setTimeout(b,1);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD> <BODY onLoad="a();"><div id="aa" style="position:absolute;top:10; left:10; background-color:#990000; width:0; height:0px; display:none" onClick="b()"></div> </BODY></HTML>
忙里偷闲 忙一会写一会 代码很乱 反正效果有了 哈哈