Web前端 5

js示例代码Web前端,js代码特效

这是折叠后的效果:

<html xmlns="http://www.phpernote.com/javascript-function/833.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript实现可最小化/关闭的右下角浮动广告窗_<a href="http://www.phpernote.com">php程序员的笔记</a></title>
<style type="text/css">
#msg_win{position:absolute;right:0px;top:503px;width:250px;font-size:12px;display:block;overflow:hidden;z-index:99;border:1px solid #000;background:#FFF;visibility:visible;opacity:1;}
#msg_title{background:#EB1D1D;border:0px solid #000;border-width:0 0 1px 0;color:#FFFFFF;width:100%;height:26px;line-height:26px;font-weight:bold;text-indent:5px;}
#msg_win .icos{position:absolute;top:0px;*top:0px;right:3px;z-index:9;}
.icos a{float:left;color:#FFFFFF;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;}
.icos a:hover{color:#FFCC00;}
#msg_content{margin:0px 0px;padding:5px 5px;width:100%;height:220px;overflow:hidden;}
</style>
</head>
<body>
<div style="height:2000px;"></div>
<div id="msg_win">
  <div class="icos"><a id="msg_min" title="最小化" href="javascript:void(0);">-</a><a id="msg_close" title="关闭" href="javascript:void(0);">×</a></div>
  <div id="msg_title">右下角漂浮广告效果</div>
  <div id="msg_content">本站是一个php程序员的工作生活笔记,本站包含了php网络编程学习教程,数据库(主要是MySQL和Access数据库)教程,javascript,jquery,div+css,html,windows系统,linux系统以及健康养生方面的学习笔记和生活经验的积累!</div>
</div>
<script language="javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('9 12={k:8(){9 k=5.l.T==1?[0,1,\'11\',5.u[0],\'最小化\']:[1,0,\'S\',5.u[1],\'恢复\'];5.l.T=k[0];5.f.g.1E=k[1];5.16.g.J=k[2];5.l.K=k[3];5.l.15=k[4];5.f.g.j=5.n().j},14:8(){5.f.g.J=\'S\';H.N=1n},A:8(x){9 v=x>=q?\'\':\'1c(R=\'+x+\')\';5.f.g.1e=x<=0?\'1d\':\'1f\';5.f.g.1i=v;5.f.g.R=x/q},10:8(){w(5.z);9 7=5,m=5.m(0,q,0.1),t=0;5.z=X(8(){t=m();7.A(t[0]);W(t[1]==0){w(7.z)}},6)},m:8(a,b,c){9 Q=U[(a-b)>0?"1k":"1j"],c=c||0.1;o 8(){o[a+=Q((b-a)*c),a-b]}},n:8(){9 d=p,b=p.1l,e=p.1m;9 s=U.1o(b.V,e.V);9 h=/1p/i.1a(p.1h)?b.P:e.P;9 E=5.f.1b;o{18:s+h+E+2+\'B\',j:s+h-E-2+\'B\'}},17:8(y){w(5.D);9 7=5,a=Y(5.f.g.j)||0;9 m=5.m(a,Y(y));9 t=0;5.D=X(8(){t=m();7.f.g.j=t[0]+\'B\';W(t[1]==0){w(7.D);7.Z()}},6)},Z:8(){9 7=5,L,G;H.N=8(){M(L);M(7.z);7.A(0);L=F(8(){7.f.g.j=7.n().j;7.10()},q)};H.1u=8(){M(G);G=F(8(){7.f.g.j=7.n().j},q)}},O:8(){8 $(19){o p.1g(19)};5.f=$(\'1w\');9 k={l:\'1x\',I:\'1v\',15:\'1r\',16:\'1s\'};1t(9 C 1y k){5[C]=$(k[C])};9 7=5;5.l.13=8(){7.k();5.1z()};5.I.13=8(){7.14()};5.u=1D.1B.1C().1A(\'1q\')+1?[\'-\',\'□\',\'×\']:[\'0\',\'2\',\'r\'];5.l.K=5.u[0];5.I.K=5.u[2];F(8(){7.f.g.J=\'11\';7.f.g.j=7.n().18;7.17(7.n().j)},0);o 5}};12.O();',62,103,'|||||this||me|function|var||||||win|style|||top|set|minbtn|fx|getY|return|document|100||||char||clearInterval|||timer2|setOpacity|px|Id|timer|h2|setTimeout|rt|window|closebtn|display|innerHTML|st|clearTimeout|onscroll|init|clientHeight|cMath|opacity|none|status|Math|scrollTop|if|setInterval|parseInt|bind|show|block|Message|onclick|close|title|content|moveTo|foot|id|test|offsetHeight|Alpha|hidden|visibility|visible|getElementById|compatMode|filter|ceil|floor|body|documentElement|null|max|BackCompat|firefox|msg_title|msg_content|for|onresize|msg_close|msg_win|msg_min|in|blur|indexOf|userAgent|toLowerCase|navigator|borderBottomWidth'.split('|'),0,{}))
</script>
<br />
<p><a href="http://www.phpernote.com">php程序员的笔记</a> - 最专业的php教程网站 - 致力为中国php程序员们提供有质量的经验教程!</p>
</body>
</html>

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

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下

效果图:

Web前端 1

Web前端 2

具体代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>网页右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}
#winpop .title{
 width:100%;
 height:22px;
 line-height:20px;
 background:#FFCC00;
 font-weight:bold;
 text-align:center;
 font-size:12px;
}
#winpop .con{
 width:100%;
 height:90px;
 line-height:80px;
 font-weight:bold;
 font-size:12px;
 color:#FF0000;
 text-decoration:underline;
 text-align:center
}
#silu{
 font-size:12px;
 color:#666;
 position:absolute;
 right:0;
 text-decoration:underline;
 line-height:22px;
}
.close{
 position:absolute;
 right:4px;
 top:-1px;
 color:#FFF;
 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"; //隐藏DIV
 }
 }
}
window.onload=function(){
 var oclose=document.getElementById("close");
 var bt=document.getElementById("bt");
 document.getElementById('winpop').style.height='0px';
 setTimeout("tips_pop()",3000);
 oclose.onclick=function(){tips_pop()}
 bt.onclick=function(){tips_pop()}
}
</script>
<body>
<div id="silu">
 <button id="bt">3秒后会在右下角自动弹出窗口,如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
 <div class="title">您有新的短消息!X</div>
 <div class="con">1条未读信息(</div>
</div>
</body>
</html>

以上代码实现了我们需要的功能,下面简单介绍一下实现过程。
实现原理:
原理非常的简单,下面分步做一下简单的介绍:
1.让窗口居于网页的右下角:
实现代码如下:

#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}

以上代码将windpop元素设置为绝对定位,尤其是将它的right和bottom属性值设置为0,这样就保证了它位于网页的右下角,同时也将它的高度设置为0px,也就是说在默认状态下是隐藏的。
2.如何显示和隐藏: 通过定时器函数setInterval()每隔指定时间调用一次changeH()函数,此函数可以根据传递的值不断的设置windpop的高度,这样就实现了此窗口平滑出现和消失的效果。原理大体如上,这里就不多介绍了。

以上就是右下角弹出提示框的实现代码,希望对大家的学习javascript程序设计有所帮助。

这个效果可以实现弹出广告的折叠和展开,当网页刚打开时,广告是从底部慢慢的浮上来的,直至固定在页面底部。当滚动条滚动时也是一直固定在页面的底部,经本人测试,是兼容各大主流浏览器的。由于代码比较长,这里就不贴代码了,下面有具体的代码文件下载。先来看一下这个特效的效果图吧!

Web前端 3

您可能感兴趣的文章:

  • js实现右下角窗口弹出窗口效果
  • js右下角弹出窗口,点击可关闭效果
  • Js右下角视频广告代码(百度视窗)
  • JS模仿MSN右下角弹出提示框代码
  • 兼容性非常好的js右下角与漂浮广告代码
  • js右下角与漂浮广告代码(兼容多浏览器)
  • 页面右下角弹出提示框示例代码js版
  • js网页右下角提示框实例
  • js实现右下角提示框的方法

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下
效…

右下角弹出广告 js,漂浮效果(兼容多浏览器)

您可能感兴趣的文章

  • 鼠标移动到文字上出现浮层提示特效(兼容IE,火狐等所有浏览器)
  • 右下角弹出广告 js代码特效
  • jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)
  • 显示行号的文本框效果,兼容ie、火狐等浏览器
  • 如何解决DIV层被Flash遮盖问题(兼容IE和火狐浏览器),如何使DIV层在FLASH上面显示
  • JS获取按键的代码,Js如何屏蔽用户的按键,Js获取用户按键对应的ASII码(兼容所有浏览器)
  • jquery弹出窗口插件(兼容所有浏览器)分享
  • 如何设置DIV层显示在flash对象之上,兼容ie和firefox等浏览器

JavaScript
实现的可最小化,可关闭的右下角浮动广告窗效果,可以随滚动条的滚动而自行滚动保持在右下角的固定…

您可能感兴趣的文章

  • 右下角弹出广告 js,漂浮效果(兼容多浏览器)
  • 由于其配置信息(注册表中的)不完整或已损坏,Windows
    无法启动这个硬件设备。 (代码 19)解决办法
  • Javascript将内容分享到各大社交平台网站的代码总结
  • 桌面右下角的战争—弹窗大战!很有才!超搞笑!
  • 禁止网页右键、复制、另存为、查看源文件等功能实现网页源代码保护
  • PHP压缩html网页代码减小网络数据传输量,清除空格,制表符,注释标记
  • 从营销学角度分析毛泽东和蒋介石的成败
  • Jquery等待ajax执行完毕再继续执行下面代码的效果

分享非常不错的一个使用 JavaScript
实现的可最小化,可关闭的右下角浮动广告窗效果,可以随滚动条的滚动而自行滚动保持在右下角的固定位置。基本上兼容了所有的浏览器(包括IE
火狐 谷歌浏览器
苹果浏览器)!下面先上效果图(效果图其实可以直接参看本站的右下角广告就是了,O(∩_∩)O~):

Web前端 4

右下角弹出广告 js,漂浮效果(兼容多浏览器)下载

Web前端 5

右下角弹出漂浮广告效果(兼容多浏览器)具体代码如下( js
压缩过了,如果需要研究里面的 js 源码,可下载附件看):

这是展开时的效果,默认即是展开的:

经多名网友反馈,说本效果不兼容谷歌浏览器,经测试确实有些小问题,有需要的朋友可以参考本站:

右下角弹出广告效果下载

经常看到QQ群里的朋友们在问哪里有好的右下角弹出广告效果,下面作者就将自己经常用的一个右下角弹出广告特效与大家分享一下,通过js代码实现的,没有引用jquery文件。