今天修改公司网站的首页，要加入一个类似网易、新浪、搜狐那种能够自动显示然后自动隐藏的图片！本来感觉挺简单的，从网上找了个代码测试了一下感觉效果还是可以的！然后就本机测试，但是没想到测试的时候老出错！很郁闷，今天和同事研究了一下午，页面总是先显示首页，然后再跳到那个广告图片上！我们愣是没看出哪里错了！在TONY以前的博客备份中测试，加入代码可以出现满意的效果！最后没办法了，一段一段的筛选，看看是哪里出的问题！到最后的时候只剩了一个CNN的统计代码！觉得不可能是这个统计代码的问题，但是删除后效果就出来了！狂汗啊~~
看了一下午没发现为什么这样就不看了，反正这个图片还是要撤下来的！我就奇怪啊！CNN的代码竟然还会冲突？
我们用的那个代码如下：（感觉有点四不像）
<!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=utf-8" />
<title>仿163下拉广效果</title>
<script type="text/javascript">
<!--
var h = 0; //设置当前显示高度
function loadImage(url,callback){
var img = new Image();
img.src = url;
if(img.complete){ //判断图片是否加载完成
callback.call(img);
return;
}
img.onload = function(){ //图片加载
callback.call(img);
}
}
function imgLoaded(){
document.getElementById("myImgs").src = this.src; //获得图片地址
showImage(this.height); //图片展开
}
function showImage(height){
if(h < height){
h = h + 5;
}else{
setTimeout("hideImage("+height+")",3000); //图片全部展开后，设置多少秒之后关闭图片
return;
}
var div = document.getElementById("myDiv");
var img = document.getElementById("myImgs");
div.style.display = "block";
div.style.height = h + "px";
setTimeout("showImage("+height+")",30);
}
function hideImage(height){
//alert(height);
if(h > 0){
h = h - 5;
}else{
var divs = document.getElementById("myDiv");
divs.style.display = "none"; //图片关闭后隐藏该层
return;
}
var div = document.getElementById("myDiv");
var img = document.getElementById("myImgs");
div.style.display = "block";
div.style.height = h + "px";
setTimeout("hideImage("+height+")",30);
}
//-->
</script>
</head>
<body style="margin:0px;" onload="loadImage('images/myImg.jpg',imgLoaded);">
<div id="myDiv" style="display:none; overflow:hidden;"><img src="" id="myImgs" /></div>
<div>下拉广告效果</div>
</body>
</html>
