js定时器实现右下角弹窗广告缓慢弹出 |
您所在的位置：网站首页 › js广告如何添加 › js定时器实现右下角弹窗广告缓慢弹出 |
js定时器实现右下角弹窗广告缓慢弹出
|
主要利用js的定时器实现对html元素的定位进行改动，以达到缓慢出现在右下角的效果。 效果如下： html和js部分： 系统提醒您 发现木马，建议立即清除 木马文件 ： C:\ProgramData\Steam 木马名称 ： herosuperProsVirus.exe 添加信任 立刻清除 更多 //关闭按钮 var stop = document.getElementsByClassName('stop')[0]; var box = document.getElementById('box'); stop.onclick = function () { box.style.display = 'none' }; //设置定时器 var virus = setInterval(up, 20); function up() { var speed = 2; var bottom = parseInt(box.style.bottom) + speed; box.style.bottom = bottom + 'px'; //console.log(bottom); if (bottom >= 0) { clearInterval(virus) } }css部分，内部样式： * { margin: 0; padding: 0; text-align: center; text-decoration: none; } #box { width: 400px; height: 300px; } .head { width: 400px; height: 40px; background-color: rgb(241, 53, 8); font-size: 22px; line-height: 41px; color: white; padding-left: 10px; box-sizing: border-box; letter-spacing: 4px; } .stop { font-size: 26px; padding-left: 215px; text-align: right; cursor: pointer; } .body { width: 400px; height: 110px; background-color: rgb(241, 53, 8); } img { width: 100%; height: 100%; } .virusName { width: 400px; height: 100px; background-color: white; } .clear { color: rgb(241, 53, 8); font-size: 26px; letter-spacing: 2px; font-weight: 700; } .name { font-weight: 700; margin-top: 8px; } span { font-weight: normal; color: rgb(241, 53, 8); } .bottom { width: 400px; height: 50px; background-color: rgb(240, 240, 240); } .new { text-align: left; color: rgb(0, 0, 204); font-size: 18px; line-height: 50px; float: left; } button { width: 70px; height: 40px; background-color: rgb(227, 237, 250); float: left; margin-top: 5px; font-size: 18px; letter-spacing: 1px; border: solid 1px rgb(168, 179, 186); } .right { margin-left: 152px; width: 100px; }引用的一张图片如下，图片来源（摄图网）： |
【本文地址】
今日新闻 |
推荐新闻 |