🤭新的广告方式,很新很新!
哈哈 会爬树的金鱼,树上的金鱼呦😀
前言
老板：针对上半年业绩发表一下大家的看法,大家自由发言,已经定好晚餐和夜宵了有需要的自取୧(๑•̀⌄•́๑)૭
产品A：根据大数据分析公司产品的广告收入较低拖后腿,建议扩宽曝光渠道!
产品B：对! 大数据分析公司产品的广告大部分来自移动端,pc端曝光率较少,可以增加一下曝光率,据统计移动端大部分广告收入来自首屏广告,我觉得pc也可以加上
程序员: PC哪有首屏广告啊,行业都没有先例
老板：这个好,没有先例! 我们又可以申请专利了Ψ(￣∀￣)Ψ 搞起!!今年公司专利指标有着落了
程序员: 这也太影响体验了
产品A：就说能不能做吧, 今天面试的那个应届生不错能倒背chromium源码,还能手写react源码并且指出优化方案
程序员: 我做!!! ╭(￣m￣*)╮
先来个全屏遮罩🤔
这还不简单,直接一个定位搞定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XX百货</title>
<style>
#ADBox {
background: #fff;
position: fixed;
width: 100%;
height: 100%;
display: none;
}
</style>
</head>
<body>
<div id="ADBox">广告</div>
</body>
</html>
搞定提测!
重来没接过这么简单的需求,送业绩这是╮(╯﹏╰)╭
第一次提测🤐
测试A: 送业绩这是? 产品说要和移动端一模一样,你这哪一样了?? 直系看需求文档!!
程序员: 需求文档就一句话, 和移动端一样的开屏广告, 这那不一样了?
测试A: 这哪一样了?? 你家移动端广告露个顶部出来?看看哪个app广告不是全屏的???
程序员: 啥? 还要全屏?? 行...
// 必须用点击事件触发才能全屏
document.addEventListener("click", async (elem) => {
const box = document.getElementById("ADBox");
if (box.requestFullscreen) {
box.requestFullscreen();
}
setTimeout(() => {
const state = !!document.fullscreenElement;
// 是否全屏状态
if (state) {
// 取消全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}, 5 * 1000);
});
搞定提测
第二次提测🙄
产品A: 嗯...有点感觉了,这鼠标去掉都遮住广告了,万一广告商不满意投诉怎么办?
程序员: 鼠标这么小这么能遮住广告??
产品B: 看我鼠标? (大米老鼠标PC主题)
程序员: ...
<style>
#ADBox {
background: #fff;
position: fixed;
width: 100%;
height: 100%;
// 隐藏广告Box让用户点任意地方激活
opacity: 0;
}
</style>
提测...
第三次提测🤕
测试A: 为啥还有鼠标???
程序员: 怎么那可能还有?
测试A: 过来看,鼠标不动的话还是会显示鼠标哦,动一下才消失
程序员: ##..行, 那我直接锁指针
<script>
let pointerLockElement = null;
// 指针锁定或解锁
document.addEventListener(
"pointerlockchange",
() => {
// 锁定的元素是否为当前的元素 -- 没啥也意义可以去掉
if (document.pointerLockElement === pointerLockElement) {
console.log("指针锁定成功了。");
} else {
pointerLockElement = null;
console.log("已经退出锁定。");
}
},
false
);
// 锁定失败事件
document.addEventListener(
"pointerlockerror",
() => {
console.log("锁定指针时出错。");
},
false
);
// 锁定指针,锁定指针的元素必须让用户点一下才能锁定
function lockPointer(elem) {
// 如果已经存锁定的元素则不操作
if (document.pointerLockElement) {
return;
}
if (elem) {
pointerLockElement = elem;
elem.requestPointerLock();
}
}
// 解除锁定
function unlockPointer() {
document.exitPointerLock();
}
// 必须用点击事件触发才能全屏
document.addEventListener("click", async () => {
const box = document.getElementById("ADBox");
if (box.requestFullscreen) {
box.requestFullscreen();
box.style.opacity = 1;
box.style.display = "block";
lockPointer(box);
}
// 5秒后解除锁定
setTimeout(() => {
const state = !!document.fullscreenElement;
// 是否全屏状态
if (state) {
// 取消全屏
if (document.exitFullscreen) {
document.exitFullscreen();
unlockPointer();
box.style.display = "none";
}
}
}, 5 * 1000);
});
</script>
提测...
第四次提测😤
测试A: Safari上失效哦
程序员: 额....
<script>
// requestFullscreen 方法兼容处理
function useRequestFullscreen(elem) {
const key = ['requestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen', 'msRequestFullscreen']
for (const value of key) {
if (elem[value]) {
elem[value]()
return true
}
}
return false
}
// document.exitFullscreen 方法兼容处理
document.exitFullscreenUniversal = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen
// fullscreenElement 对象兼容处理
function getFullscreenElement() {
const key = ['fullscreenElement', 'webkitFullscreenElement']
for (const value of key) {
if (document[value]) {
return document[value]
}
}
return null
}
// fullscreenchange 事件兼容处理
addEventListener("fullscreenchange", endCallback);
addEventListener("webkitfullscreenchange", endCallback);
// requestPointerLock 方法在Safari下不可与 requestFullscreen 方法共用一个事件周期 暂无解决方法,必须让用户点两次鼠标,第一次全屏,第二次锁鼠标
// 同一事件周期内会出现的问题: 1.有小机率会正常执行, 2.顶部出现白条(实际上是个浏览器锁鼠标的提示语,但显示异常了) 3.锁定鼠标失败
</script>
结尾😩
产品A: 效果不错,但还有点小小的瑕疵,为啥要鼠标点一下才能弹广告,改成进入就弹窗吧
程序员： 要不还是找上次那个应届生来吧,改chromium源码应该能实现╭∩╮(︶︿︶)╭∩╮
链接：https://juejin.cn/post/7270082131962183739
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
