基于jQuery的网页右下角弹出广告(IE7,firefox)

演示代码:

测试

.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;
}

$(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()
});

测试Div

打开

这是一些测试内容

测试Div

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

核心代码:


代码如下:

$(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()
});

经测试IE6不可运行,鉴于当前使用IE6的中国用户比较多,建议大家学习,不建议使用。

(0)

相关推荐

  • 使用jQuery实现页面定时弹出广告效果

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show()) 第六步:清除显示广告图片的定时操作 第七步:设置定时操作(隐藏广告图片的函数) 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide()) 第九步:清除隐藏广告图片的定时操作 <script

  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    演示代码: 测试 .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; t

  • 基于JQuery实现页面定时弹出广告

    Js相关技术 定时器: ​ setInterval & clearInterval ​ setTimeout & clearTimeout 显示: img.style.display = "block" 隐藏: img.style.display = "none" img 对象 style属性: style对象 需求分析 当用户打开界面,3秒钟之后弹出广告,这个广告显示5秒钟,隐藏广告 技术分析 定时器: setTimeout 显示和隐藏: styl

  • 基于Jquery+div+css实现弹出登录窗口(代码超简单)

    具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • 基于jQuery实现点击弹出层实例代码

    jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

  • 网页右下角弹出窗体实现代码

    复制代码 代码如下: <!--开始--> <style type="text/css"> #msg_win{position:absolute;right:0px;display:none;overflow:hidden;z-index:99;border:1px solid #c00;background:#F9EFFC;width:210px;font-size:12px;margin:0px;} #msg_win .icos{position:absolu

  • js右下角弹出提示框示例代码

    本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;

  • jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

  • jquery制作漂亮的弹出层提示消息特效

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 实现的代码. html代码: 复制代码 代码如下: <div class='b'>     </div>     <div class='bb'>     </div>     <button id='go'>         GO     </button>     <div cl

  • JQUERY实现网页右下角固定位置展开关闭特效的方法

    本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: <div class="tagbox"> <div class="tag"> <span>热门标签...</span> <ul> <li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起<

随机推荐