js实现简单广告小窗口
本文实例为大家分享了js实现简单广告小窗口的具体代码,供大家参考,具体内容如下
一、目标
利用js实现简易的无法关掉的广告小窗口功能
二、实现步骤
1.设置小窗口样式;
2.在JavaScript中绑定左上角X的事件,使其可以点击,但是关不掉,并且在一个指定范围内随机移动位置;
3.设置点击20下(可改变数字)小窗口自动消失。
三、代码模块
1.css部分
.box {width: 180px; height: 180px; background: #f0f0f0; position: absolute; } .X {width: 30px; height: 30px; background: #eaeaea; color: firebrick; text-align: center; line-height: 30px; }
2.html部分
X
3.js部分
4.效果图
原始样式:
文章图片
点击后:
文章图片
【js实现简单广告小窗口】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 科学养胃,别被忽悠,其实真的很简单
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 松软可口易消化,无需烤箱超简单,新手麻麻也能轻松成功~
- 人脸识别|【人脸识别系列】| 实现自动化妆