javascript实现的右下角弹窗实例
本文实例讲述了javascript实现的右下角弹窗的方法。分享给大家供大家参考。具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右下角的弹窗</title>
<style type="text/css">
body { background:#333333;}
#winpop {
width:200px; height:0px;
position:absolute; right:0; bottom:0;
border:1px solid #999999; margin:0; padding:1px;
overflow:hidden; display:none; background:#FFFFFF
}
#winpop .title {
width:100%; height:20px;
line-height:20px; background:#FFCC00;
font-weight:bold; text-align:center;
font-size:12px;
}
#winpop .con {
width:100%; height:80px;
line-height:80px; font-weight:bold;
font-size:12px; color:#FF0000;
text-decoration:underline; text-align:center
}
#silu {
font-size:13px; color:#999999;
position:absolute; right:0;
text-align:right; text-decoration:underline;
line-height:22px;
}
.close {
position:absolute; right:4px; top:-1px;
color:#FFFFFF; cursor:pointer
}
</style>
<script type="text/javascript">
function tips_pop(){
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if (popH==0){
MsgPop.style.display="block";
show=setInterval("changeH('up')",2);
}
else {
hide=setInterval("changeH('down')",2);
}
}
function changeH(str) {
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){
if (popH<=100){
MsgPop.style.height=(popH+4).toString()+"px";
}
else{
clearInterval(show);
}
}
if(str=="down"){
if (popH>=4){
MsgPop.style.height=(popH-4).toString()+"px";
}
else{
clearInterval(hide);
MsgPop.style.display="none";
}
}
}
window.onload=function(){
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",800);
}
</script>
</head>
<body>
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
<hr>
<div id="silu">
<button onclick="tips_pop()">测试按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的消息
<span class="close" onclick="tips_pop()">X</span></div>
<div class="con">未读信息(1)</div>
</div>
<div>http://www.jb51.net/</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JS实现简单的右下角弹出提示窗口完整实例
本文实例讲述了JS实现简单的右下角弹出提示窗口效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
js 右下角弹窗效果代码(IE only)
右下角弹窗效果练习 function $(obj){ return document.getElementById(obj); } function pop(obj){ var h = parseInt($("popDiv").currentStyle.height); $("popDiv").style.height = (h + obj) + "px"; if(parseInt($("popDiv").style.heig
-
js实现仿MSN带关闭功能的右下角弹窗代码
本文实例讲述了js实现仿MSN带关闭功能的右下角弹窗代码.分享给大家供大家参考.具体如下: 这是一款非常精致漂亮的仿MSN右下角弹出窗口,带关闭功能,直接复制代码就管用.演示要用到几个小图片,运行的时候点击右键保存一下,这里提供一种思路,并不完全局限于此种方法,熟能生巧. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-msn-close-able-adv-codes/ 具体代码如下: <HTML> <HEAD> &l
-
js右下角弹出提示框示例代码
本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;
-
纯js的右下角弹窗实例
这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出. 采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事.如果采用窗口自下而上地移动,还要考虑div的position设置问题,这个问题还涉及一系列兼容性问题,很严重. 之所以称之为纯js的右下角弹窗,是因为,在任意页面,只需要如下引入Jquery之后,再引入这个Js,则可以使用,唯一注意就是Jquery的引入一定要在这个Js之前,由于我的JS是全基于Jquer
-
js实现右下角提示框的方法
本文实例讲述了js实现右下角提示框的方法.分享给大家供大家参考.具体实现方法如下: 实现右下角提示框的Jquery插件 (popup.js) 复制代码 代码如下: //兼容ie6的fixed代码 //jQuery(function($j){ // $j('#pop').positionFixed() //}) (function($j){ $j.positionFixed = function(el){ $j(el).each(function(){
-
javascript实现的右下角弹窗实例
本文实例讲述了javascript实现的右下角弹窗的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
JavaScript单例模式能不能去实例只留单原理解析
目录 一.单例模式的分类 二.惰性单例模式 二.普通单例模式 总结 一.单例模式的分类 一个环境中有且只有一个实例,并且当前环境可以访问到它.往小了说,当前环境可以是一个函数作用域.块级作用域,往大了说可以是全局window或者global环境.如果按照实例的创建时机进行单例模式的分类,有: 普通单例模式:在环境初始时就创建 惰性单例模式:在某个特定的时机才创建 二.惰性单例模式 从单例模式的定义出发,一个环境中有且只有一个实例,并且使用时才去创建它,那么就可以把当前单例模式称之为惰性单例模式
-
详解JavaScript基于面向对象之继承实例
javascript面向对象继承的简单实例: 作为一门面向对象的语言,继承自然是它的一大特性,尽管javascript的面向对象的实现机制和和c#和java这样典型的面向对象不同,但是继承的基本特点还是具有的,简单的说就是获得父级的方法和属性,下面是一段简单的实例,大家有兴趣可以分析一下: window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.protot
-
JavaScript异步上传图片文件的实例代码
html: <form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /> </form> jquery: $("#addfile&
-
JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
最近做了个项目,其中有项目需求是要实现跑马灯抽奖效果,实现此功能主要用到js相关知识,废话不多说,感兴趣的朋友可以阅读下全文. 开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的: 1.移动端1px像素线的问题 对于设计师给我的手机端网页的设计稿都是2倍图.按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2.但是对于1像素的线呢? 先来看两张图,设计稿的效果: 在三星 S4下的实际显示效果: 可以看到这个时候1px的线竟然显示不出来了.这个问题是跟 S4手机的
-
JavaScript之创意时钟项目(实例讲解)
"时钟展示项目"说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知识点汇总: jQuery.原生javascript.css3.h5 四.重难点解释 1.各个指针的旋转角度的获取 首先要明确如下概念: 时钟指针旋转一周360度 时针: 表盘上共有12小时,每经过一小时,要旋转30度: 分针: 表盘上共有60个小格子,分针每走一分钟,经过一个小格子,转动6
-
JavaScript无缝滚动效果的实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&