求好心人给一段loading代码

yowbell 2008-03-27 11:34:16
就是现在很流行的那种,点击一个链接,在出现另一个页面之前出现一个loading 画面,不知道要如何写,莫笑我
...全文
52 点赞 收藏 5
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
wumingfei 2008-03-27
用ajax就可以完成了
回复
http://blog.csdn.net/chinmo/archive/2008/03/16/2187211.aspx
回复
chenguang79 2008-03-27
帮帖一下
<script language="JavaScript">
<!--
var smallX = 150; //缩略图宽度
var bigX = 600; //预览窗大小,可以任意设置
var bigY = 450;
var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
var srcY = -1;
var border = 5; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload=function (){ //初始化数据
head.innerHTML="图片已载入";
isIE=window.event?1:0; //由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异
if (srcX==-1 || srcY==-1){srcX=bigpic.width;srcY=bigpic.height;} // 如果有一个为-1,则使用原图大小
else{bigpic.width=srcX;bigpic.height=srcY;}
smallY=srcY*smallX/srcX; //按比例计算出缩略图的高
viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小
viewY=bigY/srcY*smallY;
bl=srcX/smallX; //得到缩放比例
smallpic.width=smallX; //初始化实例属性
smallpic.height=smallY;
smallbox.style.borderWidth=border;
smallbox.style.width=smallpic.offsetWidth+border*2*isIE; //(+border*2*isIE),如果是IE就加上2倍边框以修正模型差异,FF无变化
smallbox.style.height=smallpic.offsetHeight+border*2*isIE; //以下的isIE同理,修正ie盒模型bug
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2*isIE;
bigbox.style.height=bigY+border*2*isIE;
view.style.left=smallbox.offsetLeft + border;
view.style.top=smallbox.offsetTop + border;
view.style.width=viewX- !isIE*3+1;
view.style.height=viewY- !isIE*3+1;
}
function move(e){
var e = window.event?window.event:e; //得到IE或FF的event
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft; //分别在FF与IE下获得相对坐标
vY=e.pageY-border-smallbox.offsetTop}
else{vX=e.offsetX;vY=e.offsetY}
vX+=-viewX/2; //得到缩略图的预览窗位置
vY+=-viewY/2;
if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
if (vY < 0) vY = 0;
if (vX > smallX - viewX) vX = smallX - viewX;
if (vY > smallY - viewY) vY = smallY - viewY;
bigpico.style.marginLeft = - vX * bl; //刷新预览窗口
bigpico.style.marginTop = - vY * bl;
view.style.left = vX + smallbox.offsetLeft + border; //刷新缩略图中预览窗口
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
img{display:block;}
#smallbox{border:1px green solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
#bigbox{border:1px green solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
#view{border:1px silver solid;width:0px;height:0px;position:absolute;font-size:0px}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:lime}
//-->
</style>
<div id="head">图片loading...</div>
<div id="smallbox"><!--缩略图窗口//-->
<img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49455.jpg" border="0" onmousemove="move(event)">
</div>
<div id="bigbox"><!--预览窗口//--><div id="bigpico"><!--大图片容器//-->
<img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49457.jpg" border="0">
</div></div>
<div id="view" onmousemove="if (!isIE) move(event)"></div><!--缩略图上的预览窗//-->
回复
www_7di_net 2008-03-27
你看看我的论坛就有这个效果http://www.7di.net,你自己抠代码用吧。
回复
yowbell 2008-03-27
up
回复
相关推荐
发帖
ASP
创建于2007-09-28

2.8w+

社区成员

ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
申请成为版主
帖子事件
创建了帖子
2008-03-27 11:34
社区公告
暂无公告