html页面右下角添加js广告,javascript实现右下角广告框效果

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

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

演示部分

右下角广告框效果

#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;

}

广告入口>>

(function(){

//封装一下dom的id操作

var $ = function(id){

return document.getElementById(id);

};

//添加点击事件

$("icon").οnclick=function(){

$("advbox").className = "hide";

};

$("resetadv").οnmοuseοver=function(){

$("advbox").className = "show";

};

})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html页面右下角添加js广告,javascript实现右下角广告框效果相关推荐

html 开关按钮 js代码,JavaScript实现开关等效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: 开关灯 html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; cu ...
ASP.NET页面动态添加js脚本
有时我们需要生成自己的JavaScript代码并在运行时动态添加到页面,接下来我们来看一下如何将生成的JavaScript代码动态添加到ASP.NET页面. 为了添加脚本,要将自定义的脚本在一个字符串 ...
微信小程序 - 页面插入添加 Banner 广告超详细教程（支持自定义样式、位置、大小等）及注意事项
前言如果您需要点击弹出的广告,请访问: 微信小程序 - 页面插入广告(激励式广告). 本文将从 0-1 完成整个过程,您只需要按照步骤操作即可, 代码干净整洁注释详细,快速将代码移植到您的微信小程序 ...
html中钟表功能的js插件,javascript绘制简单钟表效果
本文给大家分享一个canvas的时钟绘制,供大家参考,具体内容如下复制可直接使用 h1 { text-align: center; } div { width: 400px; height: 400 ...
jsf取js变量_JSF页面中的JS取得受管bean的数据（受管bean发送数据到页面）
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: 删除- http://blog.csdn.net/xxjoy_777/articl ...
php网页右下方广告窗口,javascript实现右下角广告框效果
本文教大家用原生js实现的简单网页主页右下角的广告框效果,利用好绝对定位,点击X关闭广告,里面的内容不管动图或者视频都可以. 代码最简洁,js行为优化版,复制粘贴即可使用. 演示部分右下角广告框效果 ...
framer x使用教程_如何使用Framer Motion将交互式动画和页面过渡添加到Next.js Web应用程序
framer x使用教程 The web is vast and it's full of static websites and apps. But just because those apps ...
用js完成页面定时弹出广告
用js完成页面定时弹出广告第一步:在页面指定位置隐藏一个广告图片(使用display属性的none值) 第二步:确定事件(onload)并为其绑定一个函数第三步:书写这个函数(设置一个显示图片的定 ...
html页面js遍历listview,javascript实现的listview效果
javascript实现的listview效果更新时间:2007年04月28日 00:00:00 作者: #oContainer { width: 600px; height: 500px; b ...
网页自动切换html css js,HTML页面自动清理js、css文件的缓存（自动添加版本号）_HTML/Xhtml_网页制作...
这篇文章主要介绍了HTML页面自动清理js.css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家HTML源码,也给大家做个参考.对HTML感兴趣的小伙伴们一起跟随小编过来看看吧在we ...

html页面右下角添加js广告,javascript实现右下角广告框效果

html页面右下角添加js广告,javascript实现右下角广告框效果相关推荐

最新文章

热门文章