搜索
您的当前位置:首页javascript实现右下角广告框效果

javascript实现右下角广告框效果

时间:2023-12-01 来源:明星茬娱乐
本文教大家用原生js实现的简单网页主页右下角的广告框效果,利用好绝对定位,点击X关闭广告,里面的内容不管动图或者视频都可以。

代码最简洁,js行为优化版,复制粘贴即可使用。

演示部分

javascript实现右下角广告框效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>右下角广告框效果</title></head><style type="text/css"> #advbox{ width: 400px; height: 300px; position: fixed; right: 0; bottom: 0; } .adv{ width: 380px; height: 270px; border: 1px solid #a00; position: relative; } #icon{ display: block; width: 24px; height: 24px; color: #0c0; font-size: 30px; font-weight: bolder; position: absolute; right: 2px; top: 2px; cursor: pointer; } #resetadv{ width: 105px; height:20px; position: fixed; right: 25px; bottom: 15px; color: #fff; font-size: 20px; background-color: #333; } .hide{ display: none; } .show{ display: block; }</style><body> <div id="advbox"> <div> <img src="" alt="结合html5,这可以是一个gif,swf或者video"> <span id="icon">X</span> </div> </div> <div id="resetadv">广告入口>></div> <script type="text/javascript"> (function(){ //封装一下dom的id操作 var $ = function(id){ return document.getElementById(id); }; //添加点击事件 $("icon").onclick=function(){ $("advbox").className = "hide"; }; $("resetadv").onmouseover=function(){ $("advbox").className = "show"; }; })();</script> </body></html>

小编还为您整理了以下内容,可能对您也有帮助:

如何使用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" />

<script language="JavaScript" type="text/javascript">

lastScrollY=0;

function heartBeat(){

var diffY;

if (document.documentElement && document.documentElement.scrollTop)

diffY = document.documentElement.scrollTop;

else if (document.body)

diffY = document.body.scrollTop

else

{/*Netscape stuff*/}

//alert(diffY);

percent=.1*(diffY-lastScrollY);

if(percent>0)percent=Math.ceil(percent);

else percent=Math.floor(percent);

document.getElementById("lovexin12").style.top=parseInt(document.getElementById

("lovexin12").style.top)+percent+"px";

document.getElementById("lovexin14").style.top=parseInt(document.getElementById

("lovexin12").style.top)+percent+"px";

lastScrollY=lastScrollY+percent;

//alert(lastScrollY);

}

suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"

suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"

document.write(suspendcode12);

document.write(suspendcode14);

window.setInterval("heartBeat()",1);

</script>

<style type="text/css">

<!--

#lovexin12,#lovexin14{

width:100px;

height:230px;

background-color:yellow;

border:2px solid red;

}

html,body{

height:800px;

}

#mm{

height:800px;

}

-->

</style>

</head>

<body>

<div id="mm">

webdm.cn

</div>

</body>

</html>追问十分感谢!

javascript 右下角 广告代码?

本文教大家用原生js实现的简单网页主页右下角的广告框效果,利用好绝对定位,点击X关闭广告,里面的内容不管动图或者视频都可以。

代码最简洁,js行为优化版,复制粘贴即可使用。

演示部分

javascript实现右下角广告框效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>右下角广告框效果</title></head><style type="text/css"> #advbox{ width: 400px; height: 300px; position: fixed; right: 0; bottom: 0; } .adv{ width: 380px; height: 270px; border: 1px solid #a00; position: relative; } #icon{ display: block; width: 24px; height: 24px; color: #0c0; font-size: 30px; font-weight: bolder; position: absolute; right: 2px; top: 2px; cursor: pointer; } #resetadv{ width: 105px; height:20px; position: fixed; right: 25px; bottom: 15px; color: #fff; font-size: 20px; background-color: #333; } .hide{ display: none; } .show{ display: block; }</style><body> <div id="advbox"> <div> <img src="" alt="结合html5,这可以是一个gif,swf或者video"> <span id="icon">X</span> </div> </div> <div id="resetadv">广告入口>></div> <script type="text/javascript"> (function(){ //封装一下dom的id操作 var $ = function(id){ return document.getElementById(id); }; //添加点击事件 $("icon").onclick=function(){ $("advbox").className = "hide"; }; $("resetadv").onmouseover=function(){ $("advbox").className = "show"; }; })();</script> </body></html>

javascript 右下角 广告代码?

本文教大家用原生js实现的简单网页主页右下角的广告框效果,利用好绝对定位,点击X关闭广告,里面的内容不管动图或者视频都可以。

代码最简洁,js行为优化版,复制粘贴即可使用。

演示部分

javascript实现右下角广告框效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>右下角广告框效果</title></head><style type="text/css"> #advbox{ width: 400px; height: 300px; position: fixed; right: 0; bottom: 0; } .adv{ width: 380px; height: 270px; border: 1px solid #a00; position: relative; } #icon{ display: block; width: 24px; height: 24px; color: #0c0; font-size: 30px; font-weight: bolder; position: absolute; right: 2px; top: 2px; cursor: pointer; } #resetadv{ width: 105px; height:20px; position: fixed; right: 25px; bottom: 15px; color: #fff; font-size: 20px; background-color: #333; } .hide{ display: none; } .show{ display: block; }</style><body> <div id="advbox"> <div> <img src="" alt="结合html5,这可以是一个gif,swf或者video"> <span id="icon">X</span> </div> </div> <div id="resetadv">广告入口>></div> <script type="text/javascript"> (function(){ //封装一下dom的id操作 var $ = function(id){ return document.getElementById(id); }; //添加点击事件 $("icon").onclick=function(){ $("advbox").className = "hide"; }; $("resetadv").onmouseover=function(){ $("advbox").className = "show"; }; })();</script> </body></html>

求一段 广告固定在网页右下角的代码(CSS或JS都行),谢谢!!

<script language="javascript">

function repos(x,y){ //x、y分别是你广告框的宽度和高度

layid = document.getElementById("ddiv"); //ddiv的广告框div的id

layid.style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth - x)+"px";

layid.style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight - y)+"px";

}

</script>

这是广告框的css:style="position:absolute; z-index:1; width:175px; height:80px"

然后把上面这个repos(x,y)函数同时用到onload、onscroll、onresize的事件中

JavaScript怎么实现网页右下角弹出窗口代码

 

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>JavaScript实现网页右下角弹出窗口代码</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} /* http://www.webdm.cn */

#silu { font-size:12px; color:#666;position:absolute; right:0; text-align:right; text-decoration:underline;line-height:22px;}

.close { position:absolute; right:4px;top:-1px; color:#FFF; cursor:pointer}

</style>

<scripttype="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) {

 varMsgPop=document.getElementById("winpop");

 varpopH=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(){//加载

document.getElementById('winpop').style.height='0px';

setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数

}

</script>

<body>

<div id="silu">

<buttononclick="tips_pop()">3秒后会在右下角自动弹出窗口,如果没有弹出请点击这个按钮</button>

</div>

<div id="winpop">

 <div>您有新的短消息!<spanclass="close"onclick="tips_pop()">X</span></div>

   <div>1条<ahref="http://www.luenuo.com">经典语录</a>(</div>

</div>

</body>

</html>

明星茬娱乐还为您提供以下相关内容希望对您有帮助:

javascript 右下角 广告代码?

var oPopup = window.createPopup(); //IE5.5+ var windowsUrl="模拟QQ右下角提示窗体.htm";//var windowsUrl=null;//这个是Windows的连接主地址:修改地址 //width:层宽度、height:层高度、caption:层的标题、title:题目类型、...

求一段 广告固定在网页右下角的代码(CSS或JS都行),谢谢!!

function repos(x,y){ //x、y分别是你广告框的宽度和高度 layid = document.getElementById("ddiv"); //ddiv的广告框div的id layid.style.left = (document.documentElement.scrollLeft + document.documentElement.cl...

如何使用javascript实现浏览器右下角的图片广告功能?

lastScrollY=0;function heartBeat(){ var diffY;if (document.documentElement &amp;&amp; document.documentElement.scrollTop)diffY = document.documentElement.scrollTop;else if (document.body)diffY = document.body.scrollTop...

求段网页右下角漂浮的JS代码,放广告用的!

不会被屏蔽的网页右下角漂浮窗口代码 &lt;FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" /&gt; msg_win{border:1px solid #A67901;background:#EAEAEA;width:300px;position:absolute;right:0;...

JavaScript怎么实现网页右下角弹出窗口代码

JavaScript实现网页右下角弹出窗口代码#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 ...

求:网站右下角弹窗代码

&lt;TITLE&gt;网页特效--页面右下角弹出类似QQ或MSN的消息提示&lt;/TITLE&gt;&lt;SCRIPT language=JavaScript&gt; &lt;!-- /**//* ** === ** 类名:CLASS_MSN_MESSAGE ** 功能:提供类似MSN消息框 ---...

谁会做电脑桌面右下角弹出广告的窗口?就是像腾讯广告的那样...&lt;急&gt;...

回答:&lt;HTML&gt; &lt;HEAD&gt;&lt;TITLE&gt; EvE HTML &lt;/TITLE&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;STYLE TYPE="text/css" TITLE=""&gt; td{font-size: 12px;} &lt;/STYLE&gt; &lt;/HEAD&gt;...

探究右下角弹窗广告的影响和应用

第一,右下角弹窗广告的优点:1、弹窗广告具有更好的展示效果:相较于Banner广告,弹窗广告的展示效果一般会更加出色。由于许多Banner广告淹没在了网页内容当中,或者与内容主题不符,许多用户甚至连都忘记它的存在,而弹窗广告...

JS漂浮广告代码

(function(){ ('#showWin').click(showWin);function showWin(){ ('#floatWin').show('slow');} }) 显示窗口 最近项目里正好有类似需求 代码给出来供

通过js如何调用弹窗广告

就是通过js代码实现网页对于广告的展示 js如何在有限时间隐藏提示框?可以通过以下的几个步骤来完成阻止网页窗口的弹出。1、对于每次进入系统桌面就会弹出网页窗口的情况,可采用的办法是:打开“运行”对话框,输入命令“msconfig...

Top