那个把鼠标放到模板缩略图上预览大图功能里面包含很多延伸的技术 那个进度条都是js的,我还以为是图像 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=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> var t_id = setInterval(animate,20); var pos=0; var dir=2; var len=0; function animate() { var elem = document.getElementById('progress'); if(elem != null) { if (pos==0) len += dir; if (len>32 || pos>79) pos += dir; if (pos>79) len -= dir; if (pos>79 && len==0) pos=0; elem.style.left = pos; elem.style.width = len; } } function remove_loading() { this.clearInterval(t_id); var targelem = document.getElementById('loader_container'); targelem.style.display='none'; targelem.style.visibility='hidden'; var t_id = setInterval(animate,60); } </script> <style type="text/css"> #loader_container {text-align:center;position:absolute;top:40%;width:100%} #loader { font-family:Tahoma, Helvetica, sans; font-size:10px; color:#000000; background-color:#FFFFFF; padding:10px 0 16px 0; margin:0 auto; display:block; width:135px; border:1px solid #6A6A6A; text-align:left; z-index:255; } #progress { height:5px; font-size:1px; width:1px; position:relative; top:1px; left:10px; background-color:#9D9D94 } #loader_bg { background-color:#EBEBE4; position:relative; top:8px;left:8px;height:7px; width:113px;font-size:1px } </style> </head> <body> <div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div> </body> </html>