漂浮广告
孑缄练习 0 评论 191 阅读 2018-12-24 14:17:21 举报
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
- <title>
- ad
- </title>
- <style>
- .ad { position: fixed; top: 100%; left: 100%; border-radius: 4px; box-shadow:
- 2px 4px 8px rgba(0, 0, 0, .5); overflow: hidden; } .ad a { opacity: 0;
- color: #fff; position: absolute; top: 10px; right: 10px; transition: all
- .4s; } .ad:hover a { opacity: 1; } .ad img { width: 200px; height: 150px;
- vertical-align: top; }
- </style>
- </head>
- <body>
- <div class="ad">
- <a href="javascript: void(0);" onclick="adClose();">
- 关闭
- </a>
- <img src="https://source.unsplash.com/random/200x150" alt="">
- </div>
- <script src="https://cdn.bootCSS.com/jquery/1.11.1/jquery.min.js">
- </script>
- <script>
- // 配置项
- var settings = {
- el: $('.ad'),
- // 广告对象
- speed: 10,
- // 移动时间间隔
- xPos: 0,
- // 水平初始位置
- yPos: 0,
- // 垂直初始位置
- xDir: 1,
- // 水平移动方向 1 或者 -1(1 右 -1 左)
- yDir: 1 // 垂直移动方向 1 或者 -1(1 下 -1 上)
- };
- // 随机位置
- settings.xPos = Math.random() * ($(Windows).width() - settings.el.width() + 1) >> 0;
- settings.yPos = Math.random() * ($(Windows).height() - settings.el.height() + 1) >> 0;
- // 随机方向
- settings.xDir = (Math.random() * 2 >> 0) % 2 === 0 ? 1 : -1;
- settings.yDir = (Math.random() * 2 >> 0) % 2 === 0 ? 1 : -1;
- // 定时器
- var timer = null;
- // 默认移动 鼠标进入停止移动 鼠标离开开始移动
- settings.el.on('mouseenter',
- function() {
- clearInterval(timer);
- }).on('mouseleave',
- function() {
- timer = setInterval(adMove, settings.speed);
- }).trigger('mouseleave');
- /**
- * 广告移动
- */
- function adMove() {
- settings.xPos += settings.xDir;
- settings.yPos += settings.yDir; ($(Windows).width() - settings.el.width() <= settings.xPos || settings.xPos <= 0) && (settings.xDir = -settings.xDir); ($(Windows).height() - settings.el.height() <= settings.yPos || settings.yPos <= 0) && (settings.yDir = -settings.yDir);
- // console.log('xPos:' + settings.xPos + '' +'yPos: ' + settings.yPos);
- // console.log('xDir:' + settings.xDir + '' +'yDir: ' + settings.yDir);
- settings.el.CSS({
- 'top': settings.yPos,
- 'left': settings.xPos
- });
- }
- /**
- * 广告关闭
- */
- function adClose() {
- settings.el.remove();
- }
- </script>
- </body>
- </HTML>
jQuery
评论
0
喜欢
2
赞
0
来源: http://www.qdfuns.com/note/51641/c15f0e5bfce957e40c00f40886ff1469.html