基于jQuery的網(wǎng)頁(yè)右下角彈出廣告(IE7,firefox)
更新時(shí)間：2010年08月25日 15:53:40 作者：
以前曾寫(xiě)過(guò)一個(gè),不過(guò)太麻煩了,呵呵```現(xiàn)在改進(jìn)了一下,其實(shí)很簡(jiǎn)單:css定位層一直在右下角,用js控制層的高度增減。
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
核心代碼:
$(function(){
//標(biāo)題層的高度--提示打開(kāi)或關(guān)閉
var titHeight=$("#ditTitle").height();
//內(nèi)容層的高度
var conHeight=$("#divContent").height();
//打開(kāi)或關(guān)閉
$("#close").toggle(function(){
//改變提示
$("#close").text("關(guān)閉");
//動(dòng)畫(huà)--一秒內(nèi)消息層高度增加,top增加
$("#msgDiv").animate({height:titHeight+conHeight},1000,function(){
//展開(kāi)后執(zhí)行的函數(shù)
});
},function(){
//改變提示
$("#close").text("打開(kāi)");
//alert(temp+" "+titHeight);
$("#msgDiv").animate({height:titHeight},1000,function(){
//關(guān)閉后執(zhí)行的函數(shù)
});
})
//執(zhí)行
var myTimer,i=8;
function starFun()
{
//觸發(fā)click事件,顯示
if(i==4)
{
$("#close").click();
}
//清除timeout,觸發(fā)click事件,關(guān)閉層
if(i==0)
{
window.clearTimeout(myTimer);
if($("#close").text()!="打開(kāi)")
$("#close").click();
}
myTimer=window.setTimeout(starFun,1000);
i=i-1;
}
starFun()
});
經(jīng)測(cè)試IE6不可運(yùn)行，鑒于當(dāng)前使用IE6的中國(guó)用戶比較多，建議大家學(xué)習(xí)，不建議使用。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
核心代碼:
復(fù)制代碼 代碼如下:
$(function(){
//標(biāo)題層的高度--提示打開(kāi)或關(guān)閉
var titHeight=$("#ditTitle").height();
//內(nèi)容層的高度
var conHeight=$("#divContent").height();
//打開(kāi)或關(guān)閉
$("#close").toggle(function(){
//改變提示
$("#close").text("關(guān)閉");
//動(dòng)畫(huà)--一秒內(nèi)消息層高度增加,top增加
$("#msgDiv").animate({height:titHeight+conHeight},1000,function(){
//展開(kāi)后執(zhí)行的函數(shù)
});
},function(){
//改變提示
$("#close").text("打開(kāi)");
//alert(temp+" "+titHeight);
$("#msgDiv").animate({height:titHeight},1000,function(){
//關(guān)閉后執(zhí)行的函數(shù)
});
})
//執(zhí)行
var myTimer,i=8;
function starFun()
{
//觸發(fā)click事件,顯示
if(i==4)
{
$("#close").click();
}
//清除timeout,觸發(fā)click事件,關(guān)閉層
if(i==0)
{
window.clearTimeout(myTimer);
if($("#close").text()!="打開(kāi)")
$("#close").click();
}
myTimer=window.setTimeout(starFun,1000);
i=i-1;
}
starFun()
});
經(jīng)測(cè)試IE6不可運(yùn)行，鑒于當(dāng)前使用IE6的中國(guó)用戶比較多，建議大家學(xué)習(xí)，不建議使用。
您可能感興趣的文章:
相關(guān)文章
下面小編就為大家?guī)?lái)一篇詳談jQuery中的一些正則匹配表達(dá)式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
用戶可以通過(guò)鼠標(biāo)拖拽柱狀圖從而改變每根柱子的高度，最終達(dá)到通過(guò)鼠標(biāo)拖拽圖形界面來(lái)修改服務(wù)器數(shù)據(jù)的目的。2010-11-11
這篇文章主要介紹了jQuery隊(duì)列操作方法實(shí)例,總結(jié)出了一個(gè)簡(jiǎn)潔優(yōu)雅的隊(duì)列控制方法,需要的朋友可以參考下2014-06-06
下面小編就為大家?guī)?lái)一篇jquery屬性,遍歷,HTML操作方法詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
JS拖動(dòng)選擇table里的單元格完整實(shí)例【基于jQuery】
這篇文章主要介紹了JS拖動(dòng)選擇table里的單元格,結(jié)合完整實(shí)例形式分析了基于jQuery的table表格動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,涉及事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作使用方法,需要的朋友可以參考下2019-05-05
jQuery動(dòng)畫(huà)效果-slideUp slideDown上下滑動(dòng)示例代碼
jQuery動(dòng)畫(huà)上下滑動(dòng)效果在網(wǎng)頁(yè)中的應(yīng)用還是比較廣泛的，其實(shí)很簡(jiǎn)單通過(guò)slideUp slideDown方法便可輕松實(shí)現(xiàn)，具體如下，喜歡的朋友可以參考下，希望對(duì)大家學(xué)習(xí)jquery有所幫助2013-08-08
使用jquery選擇器得到對(duì)應(yīng)表單的jquery對(duì)象，然后使用attr方法修改對(duì)應(yīng)的action,需要的朋友可以參考下2014-06-06
jQuery獲取所有父級(jí)元素及同級(jí)元素及子元素的方法(推薦)
這篇文章主要介紹了jQuery獲取所有父級(jí)元素及同級(jí)元素及子元素的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-01-01
對(duì)象不支持indexOf屬性或方法的解決方法(必看)
下面小編就為大家?guī)?lái)一篇對(duì)象不支持indexOf屬性或方法的解決方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
jQuery實(shí)現(xiàn)對(duì)無(wú)序列表的排序功能(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)對(duì)無(wú)序列表的排序功能,涉及jQuery與javascript常見(jiàn)的文本操作函數(shù)與sort排序函數(shù)的相關(guān)使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06