页面右下角弹出广告效果(二)
这部分是JS代码
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
//获取当前浏览器的宽度
var winWidth=$(window).width();
//获取当前浏览器的高度
var winHeight=$(window).height();
//标题层的高度--提示打开或关闭
var titHeight=$("#ditTitle").height();
//内容层的高度
var conHeight=$("#divContent").height();
//临时变量,存储内容层的高度
var temp = conHeight;
//alert(conHeight);
//加载时设置层的位置
$("#msgDiv").css({top:$(window).height()-$("#ditTitle").height(),left:$(window).width()-$("#ditTitle").width()-16});
//窗体改变大小时,重新设置
$(window).resize(function(){
//重新获取窗口的宽高
winWidth=$(window).width();
winHeight=$(window).height();
$("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight,left:winWidth-$("#ditTitle").width()-16});
});
$(window).scroll(function(){
//重新获取窗口的宽高
winWidth=$(window).width();
winHeight=$(window).height();
$("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight+$(window).scrollTop()});
});
//打开过关闭
$("#close").toggle(function(){
//改变提示
$("#close").text("关闭");
//还原内容层的高度
//alert(titHeight+conHeight);
//return;
$("#divContent").height(temp);
conHeight=temp;
//动画--一秒内消息层高度增加,top增加
//$("#msgDiv").height($(this).height()+temp);
$("#msgDiv").animate({top:winHeight-titHeight-conHeight+$(window).scrollTop(),height:titHeight+conHeight},1000,function(){
//展开后执行的函数
});
},function(){
//改变提示
$("#close").text("打开");
//alert(temp+" "+titHeight);
$("#msgDiv").animate({top:winHeight-titHeight+$(window).scrollTop(),height:titHeight},1000,function(){
//关闭后执行的函数
conHeight=0;
//设置内容层的高度为0
$("#divContent").height(0);
});
})
//执行
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()
});
</script>
页面右下角弹出广告效果(二)相关推荐
- Web页面右下角弹出窗口示例代码
Web页面右下角弹出窗口示例代码 声明:本代码来源于CSDN论坛,原帖为http://community.csdn.net/Expert/TopicView3.asp?id=5239784 版权归原作 ...
- asp.net 页面右下角弹出类似QQ或MSN的消息提示
<HTML><HEAD> <TITLE>网页特效观止|JsCode.CN|---页面右下角弹出类似QQ或MSN的消息提示</TITLE> <SCR ...
- win7系统老是弹窗怎么解决_win7系统右下角经常弹广告怎么办|win7系统右下角弹出广告的屏蔽方法...
相信使用win7系统的用户都经历过,经常我们使用电脑打开网页准备看电影或玩游戏的时候,任务栏右下角经常会突然屏幕弹出广告,那么遇到win7系统右下角经常弹广告怎么办呢?接下来请大家跟着小编一起学习一下 ...
- 右下角弹出广告怎么关
有时候,不知道为什么电脑系统突然很多广告,经常会在桌面右下角弹出来,让人心塞.而电脑小白遇到这种情况都不知道怎么办,真是拿广告一点办法都没有. 1. 先打开任务管理器,找到弹窗有关进程,右键打开文件所 ...
- 用js完成页面定时弹出广告
用js完成页面定时弹出广告 第一步:在页面指定位置隐藏一个广告图片(使用display属性的none值) 第二步:确定事件(onload)并为其绑定一个函数 第三步:书写这个函数(设置一个显示图片的定 ...
- 模仿CSDN浏览器右下角弹出广告,兼容所有浏览器,内容可自定义,扩张性强
下载资源地址:http://download.csdn.net/download/tjcyjd/7052739 此demo为本人亲自从csdn网站扣下来的,模仿CSDN浏览器右下角弹出广告,兼容所有浏 ...
- 右下角弹出广告 js,漂浮效果(兼容多浏览器)
分享非常不错的一个使用 JavaScript 实现的可最小化,可关闭的右下角浮动广告窗效果,可以随滚动条的滚动而自行滚动保持在右下角的固定位置.基本上兼容了所有的浏览器(包括IE 火狐 谷歌浏览器 苹 ...
- 学习CSDN右下角弹出广告
广告效果,当页面加载完毕后,慢慢弹出广告,然后再慢慢退出. 经过分析,只需要将message_pop.css和msg.popup.js加入到网页就行.为了能够在自己的网页中实现类似广告弹出效果,我们将 ...
- 简单的jQuery实现右下角弹出广告
在网上我们经常打开一个网页时候 经常看到右下角弹出一个对话框广告出来 感觉蛮好奇的 以前用javascript写一个这样的 比较复杂 要用dom节点什么的 今天用个jquery写个这样的非常简单 就 ...
最新文章
- 商业智能项目错误经验总结(三) 需求调研
- 极客Web前端开发资源大荟萃
- 官方资源帖!手把手教你在TensorFlow 2.0中实现CycleGAN,推特上百赞
- 一个简单的Spring的AOP例子(JAVA面向切面编程)
- 【自然语言处理】自然语言处理(NLP)知识结构总结
- arduino 勘智k210_如何评价嘉楠耘智的勘智K210芯片?
- python操作php文件,python怎么操作文件
- 2018 年度人工智能热门事件大盘点:「悲喜交加」
- 培训学web前端前景如何?
- 如何优雅的使用fbx sdk
- 第7章 比高斯更快的计算
- 分布式大型互联网企业架构
- 8.26~8.30-广州软件所-实习工作日记
- 在linux本地下载ftp中的文件
- 华为交换机Console口密码重置及配置
- Excel宏的基本逻辑语句
- 自我学习从阅读和记录开始
- 力推美团企业版 美团究竟意欲何为?
- OpenCV3实现橡皮擦功能[画板]
- 解决pads新建总是提示替换字体