用jQuery實作網頁右下角彈出廣告效果，這種廣告形式很普遍，今天主要分享一種方法，先貼出效果代碼：html>
測試
.divCss{
bottom:0;
display:block;
height:25px;
overflow:hidden;
padding:0;
position:fixed;
right:20px;
}
.contentCss{
background:#666;
height:200px;
width:200px;
}
.contentCssHeight{
}
.titleCss{
width:200px;
height:25px;
line-height:25px;
text-align:right;
margin:0px;
background:#999999;
}
#close{
cursor:pointer;
}
測試Div
打開
這是一些測試内容
測試Div
$(function(){
//标題層的高度--提示打開或關閉
var titHeight=$("#ditTitle").height();
//内容層的高度
var conHeight=$("#divContent").height();
//打開或關閉
$("#close").toggle(function(){
//改變提示
$("#close").text("關閉");
//動畫--一秒内消息層高度增加,top增加
$("#msgDiv").animate({height:titHeight+conHeight},1000,function(){
/ /展開後執行的函數
});
},function(){
//改變提示
$("#close").text("打開");
//alert(temp+" "+titHeight);
$("#msgDiv").animate({height:titHeight},1000,function(){
//關閉後執行的函數
});
})
//執行
var myTimer,i=8;
function starFun()
{
//觸發click事件,顯示
if(i==4)
{
$("#close").click();
}
//清除timeout,觸發click事件,關閉層
if(i==0)
{
window.clearTimeout(myTimer);
if($("#close").text()!="打開")
$("#close").click();
}
myTimer=window.setTimeout(starFun,1000);
i=i-1;
}
starFun()
});
大家複制到HTML檔案裡去看下效果。
從上面的代碼可以看出其核心代碼主要是JS那部分。
至于相容性支援IE7+，足以滿足主流相容了，試試吧！！