JS_导航 放大缩小
<!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>
<title>
苹果桌面 </title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style>
*{padding:0; margin:0}
body
{background:url(H2O_7001.jpg) no-repeat center center}
img {border:none;
width:64px; height:64px;vertical-align:top;}
.box { margin:4em;
height:150px;}
ul {list-style:none; text-align:center}
li
{display:inline;}
</style>
<script type="text/javascript"
src="myJSFrame.js"></script>
<script
type="text/javascript">
<!--
function correctPNG()
{
for(var i=0;
i<document.images.length; i++){
var img = document.images[i];
var
LW=img.width;
var LH=img.height;
var imgName =
img.src.toUpperCase();
if (imgName.substring(imgName.length-3,
imgName.length) == "PNG"){
img.style.filter+="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+",
sizingmethod=scale);" ;
img.src="transparent.gif";
img.width=LW;
img.height=LH;
}
}
}
if ($.Browse.isIE()) {window.attachEvent("onload", correctPNG);}
function turnBig(img){
if
(img.getAttribute("handle")!=0){
clearInterval(img.getAttribute("handle"));
img.setAttribute("handle",0);
}
img.setAttribute("handle",
setInterval(function(){
var w = $(img).getStyle("width").cint();
if
(w>128){
img.setStyle("width:128px;height:128px");
clearInterval(img.getAttribute("handle"));
img.setAttribute("handle",0);
return;
}
$(img).setStyle("width:"+(w+2)+"px;height:"+(w+2)+"px;");
},1));
}
function
turnSmall(img){
if
(img.getAttribute("handle")!=0){
clearInterval(img.getAttribute("handle"));
img.setAttribute("handle",0);
}
img.setAttribute("handle",
setInterval(function(){
var w = $(img).getStyle("width").cint();
if
(w<64){
img.setStyle("width:64px;height:64px");
clearInterval(img.getAttribute("handle"));
img.setAttribute("handle",0);
return;
}
$(img).setStyle("width:"+(w-2)+"px;height:"+(w-2)+"px;");
},1));
}
//-->
</script>
</head>
<body>
<div
class="box" id="box">
<ul>
<li><a
href="javascript:void(0)"><img src="png-0014.png"
/></a></li>
<li><a
href="javascript:void(0)"><img src="png-0021.png"
/></a></li>
<li><a
href="javascript:void(0)"><img src="png-0027.png"
/></a></li>
<li><a
href="javascript:void(0)"><img src="png-0069.png"
/></a></li>
<li><a
href="javascript:void(0)"><img src="png-0070.png"
/></a></li>
<li><a
href="javascript:void(0)"><img src="png-0003.png"
/></a></li>
<li><a
href="javascript:void(0)"><img src="png-0007.png"
/></a></li>
</ul>
</div>
<script
type="text/javascript">
<!--
$("#box
img").each(function(img){
img.onmouseover =
function(){
turnBig(this);
}
img.onmouseout =
function(){
turnSmall(this);
}
});
//-->
</script>
<div style="text-align:center"> <a
href="http://www.happyshow.org" style="color:#fff;
font-size:14px">happyshow.org</a></div>
</body>
</html>
