基于jQuery的網(wǎng)頁右下角彈出廣告(IE7,firefox)
更新時間：2010年08月25日 15:53:40 作者：
以前曾寫過一個,不過太麻煩了,呵呵```現(xiàn)在改進(jìn)了一下,其實很簡單:css定位層一直在右下角,用js控制層的高度增減。
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
核心代碼:
$(function(){
//標(biāo)題層的高度--提示打開或關(guān)閉
var titHeight=$("#ditTitle").height();
//內(nèi)容層的高度
var conHeight=$("#divContent").height();
//打開或關(guān)閉
$("#close").toggle(function(){
//改變提示
$("#close").text("關(guān)閉");
//動畫--一秒內(nèi)消息層高度增加,top增加
$("#msgDiv").animate({height:titHeight+conHeight},1000,function(){
//展開后執(zhí)行的函數(shù)
});
},function(){
//改變提示
$("#close").text("打開");
//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()!="打開")
$("#close").click();
}
myTimer=window.setTimeout(starFun,1000);
i=i-1;
}
starFun()
});
經(jīng)測試IE6不可運行，鑒于當(dāng)前使用IE6的中國用戶比較多，建議大家學(xué)習(xí)，不建議使用。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
核心代碼:
復(fù)制代碼 代碼如下:
$(function(){
//標(biāo)題層的高度--提示打開或關(guān)閉
var titHeight=$("#ditTitle").height();
//內(nèi)容層的高度
var conHeight=$("#divContent").height();
//打開或關(guān)閉
$("#close").toggle(function(){
//改變提示
$("#close").text("關(guān)閉");
//動畫--一秒內(nèi)消息層高度增加,top增加
$("#msgDiv").animate({height:titHeight+conHeight},1000,function(){
//展開后執(zhí)行的函數(shù)
});
},function(){
//改變提示
$("#close").text("打開");
//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()!="打開")
$("#close").click();
}
myTimer=window.setTimeout(starFun,1000);
i=i-1;
}
starFun()
});
經(jīng)測試IE6不可運行，鑒于當(dāng)前使用IE6的中國用戶比較多，建議大家學(xué)習(xí)，不建議使用。
您可能感興趣的文章:
相關(guān)文章
本文主要是通過具體實例分析jQueryUI里拖拽排序問題，十分的實用，這里推薦給小伙伴們。2015-02-02
在開發(fā)jquery時候經(jīng)常需要用到定位,有相對父元素定位和相對文檔定位，本文為此總結(jié)下，有需要的朋友可以參考下2013-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)容器間的元素拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jqPlot是一款基于jquery類庫的圖標(biāo)繪制插件。通過jqPlot可以再網(wǎng)頁中繪制線狀、柱狀、餅狀等多種樣式圖表。而且，jqPlot具有插件可擴(kuò)展性(Pluggability)，你可以編寫自己的圖表樣式。2011-04-04
jquery中dom操作和事件的實例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
最近把jquery中的dom操作和jquery中的事件和動畫的方法都大體測了一下。本來想細(xì)細(xì)的把每個方法都寫出來介紹下2011-11-11
這篇文章主要給大家介紹了關(guān)于如何選擇jQuery版本，是1.x? 2.x?還是3.x? 在選擇使用jquery之前我們常常會考慮jQuery應(yīng)該選擇什么版本?現(xiàn)在jquery一般用什么版本以及jquery ie8的兼容版本和jquery什么版本穩(wěn)定等問題，下面通過這篇文章來看看詳細(xì)的介紹吧。2017-04-04
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法,結(jié)合實例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項卡的簡單實例
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項卡的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
基于jquery實現(xiàn)圖片上傳本地預(yù)覽功能
這篇文章主要介紹了基于jquery實現(xiàn)圖片上傳本地預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2016-01-01
jQuery實現(xiàn)dialog設(shè)置focus焦點的方法
這篇文章主要介紹了jQuery實現(xiàn)dialog設(shè)置focus焦點的方法,涉及jQuery針對dialog的操作技巧,需要的朋友可以參考下2015-06-06