js實現仿163下拉廣告效果
本ＪＳ用來實現像一些大門戶網站的上部加入一下下拉式的廣告． 整個頁面向下移動，幾秒後，整個頁面又上移，那個廣告消失，或只是剩餘一部分．
mouseoverShowImage函數用於滑鼠游標mouseover事件，如果不要，可以去掉．
以下為《HTML+JS》原始碼
本ＪＳ用來實現像一些大門戶網站的上部加入一下下拉式的廣告． 整個頁面向下移動，幾秒後，整個頁面又上移，那個廣告消失，或只是剩餘一部分．
mouseoverShowImage函數用於滑鼠游標mouseover事件，如果不要，可以去掉．
以下為《HTML+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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8〃 />
<title>仿163下拉廣效果</title>
<!–下拉廣告開始–>
<script type=”text/javascript”>
<!–
//http://www.love-google.org
var h = 100; //設置當前顯示高度
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{
showImagetime1=setTimeout(“hideImage(“+height+”)”,3000); //圖片全部展開後，設置多少秒之後關閉圖片
return;
}
var div = document.getElementById(“xiala_guanggao”);
var img = document.getElementById(“myImgs”);
//alert(div);
div.style.display = “block”;
div.style.height = h + “px”;
showImagetime2=setTimeout(“showImage(“+height+”)”,30);
}
function hideImage(height){
//alert(height);
if(h > 100){
h = h – 5;
}else{
//var divs = document.getElementById(“xiala_guanggao”);
//divs.style.display = “none”; //圖片關閉後隱藏該層
//return;
}
var div = document.getElementById(“xiala_guanggao”);
var img = document.getElementById(“myImgs”);
div.style.display = “block”;
div.style.height = h + “px”;
hideImagetime=setTimeout(“hideImage(“+height+”)”,30);
}
function mouseoverShowImage(height){
clearTimeout(showImagetime2);
clearTimeout(showImagetime1);
clearTimeout(hideImagetime);
if(h < height){
h = h + 5;
}else{
showImagetime1=setTimeout(“hideImage(“+height+”)”,3000); //圖片全部展開後，設置多少秒之後關閉圖片
return;
}
var div = document.getElementById(“xiala_guanggao”);
var img = document.getElementById(“myImgs”);
//alert(div);
div.style.display = “block”;
div.style.height = h + “px”;
showImagetime2=setTimeout(“showImage(“+height+”)”,30);
}
//–>
</script>
<!–下拉廣告結束–>
</head>
<body style=”margin:0px;” onload=”loadImage('myImg.jpg',imgLoaded);”>
<div id=”xiala_guanggao” style=”display:none; overflow:hidden;” onmouseover=”mouseoverShowImage(297);”><img src=”" id=”myImgs” /></div>
<div>下拉廣告效果</div>
</body>
</html>