php网页右下方广告窗口,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;

}

X

广告入口>>

(function(){

//封装一下dom的id操作

var $ = function(id){

return document.getElementById(id);

};

//添加点击事件

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

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

};

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

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

};

})();

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

更多javascript实现右下角广告框效果相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！