运行源码即可： !DOCTYPE htmlhtml lang= " en " head meta charset= " UTF-8 " meta name= " viewport " content= " width=device-width, initial-scale=1.0 " meta http-equiv= " X-UA-Compatible " content= " ie=edge " title移动广告位/titl
运行源码即可：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>移动广告位</title> </head> <body> <div class="adDialog" style=‘width: 100px;height: 100px;background-color: yellow;position: absolute;‘></div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $.index = { moveActionTimer: null, //移动定时器 moveActionLeft: 0, moveActionTop: 20, init: function () { var $obj = $(".adDialog"); $.index.adMove($obj);/*执行走动*/ $obj.mouseover(function () { clearInterval($.index.moveActionTimer); }).mouseout(function () { $.index.adMove($obj); }); }, adMove: function ($obj) { var top_folg = false;/*控制高度-锁*/ var left_folg = true;/*控制宽度-锁*/ var win_width = $(window).width() - $obj.width();/*获取并计算浏览器初始宽度*/ var win_height = $(window).height() - $obj.height();/*获取并计算浏览器初始高度*/ $.index.moveActionTimer = setInterval(function () { if (!top_folg) { $.index.moveActionTop++; if ($.index.moveActionTop >= win_height) { top_folg = true; } } else { $.index.moveActionTop--; if ($.index.moveActionTop <= 0) { top_folg = false; } } if (left_folg) { $.index.moveActionLeft++; if ($.index.moveActionLeft >= win_width) { left_folg = false; } } else { $.index.moveActionLeft--; if ($.index.moveActionLeft <= 0) { left_folg = true; } } $obj.animate({ left: $.index.moveActionLeft, top: $.index.moveActionTop }, 3); }, 15); }, } $.index.init(); }); </script> </body> </html>View Code
github地址：https://github.com/summerSongXia/summerProject/blob/master/adMove.html