原生JS制作简单的漂浮广告

漂浮广告的原理：用通俗一点的话来说，漂浮广告就是一个在不断改变自身位置的div(当然亦可以是其他)，并且在遇到界面的边界时改变当前运动的方向；

**第一步：**制作一个能够移动的div，并给各项参数赋值

<div id="div1"></div>

var div = document.getElementById("div1");div.style.width = "200px"div.style.height = "200px"div.style.background = "red";// 相对定位div.style.position = "absolute";var offsetx = 0;var offsety = 0;// 初始距离上边界距离div.style.top = offsety;// 初始距离左边界距离div.style.left = offsetx;// X轴移动方向标志位 ，1为从左到右,0为从右到左var flagx = 1;// y轴移动方向标志位 ，1为从上到下,0为从下到上var flagy1 = 1;// 移动步长var step = 20;

**第二步：**找到正确的下边界位置，上边界和左边界是div一开始接挨着的，所以我们需要找到下边界和右边界。当div移动到最大能够移动的距离，不就是咱们要找的边界了吗

     // 网页可视区域高度var seeHeight = document.documentElement.clientHeight;// 网页可视区域宽度var seeWidth = document.documentElement.clientWidth;// 网页可视区域宽度 - 自身宽度 = 在页面最大可移动宽度var maxLeft = seeWidth - 200;// 网页可视区域宽度 - 自身高度 = 在页面最大可移动高度var maxTop = seeHeight - 200;

**第三步：**开始移动，

// 设置定时器var t = setInterval(move, 30);function move() {// 移动yidong(flagx, flagy);// 当y轴达到下边界时，改变在y轴的移动方向if (offsety >= maxTop) {flagy = 0;}// 当x轴达到下边界时，改变在x轴的移动方向if (offsetx >= maxLeft) {flagx = 0;}// 当y轴达到上边界时，改变在y轴的移动方向if (offsety < 0) {flagy = 1;}// 当x轴达到上边界时，改变在x轴的移动方向if (offsetx < 0) {flagx = 1;}div.style.top = offsety + "px"; // 大于页面的高度  top 小于0div.style.left = offsetx + "px"; // 大于页面总宽度  left 小于 0 }function yidong(x, y) {if (x == 1 && y == 1) {offsetx += step;offsety += step;}if (x == 1 && y == 0) {offsetx += step;offsety -= step;}if (x == 0 && y == 1) {offsetx -= step;offsety += step;}if (x == 0 && y == 0) {offsetx -= step;offsety -= step;}}

**最后一步：**鼠标移入时关闭定时器，移除时再打开定时器

 // 鼠标移入时，漂浮广告暂停div.addEventListener("mouseover", function() {clearInterval(t);console.log(111);});// 鼠标移出时，漂浮广告开启div.addEventListener("mouseout", function() {clearInterval(t);t = setInterval(move, 30);});```

原生JS制作简单的漂浮广告相关推荐

css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
js制作简单的时钟v1.0
js制作简单的时钟 getFullYear():获取四位数年份 getMonth():获取月份 getDate:获取日期 getDay:获取一周中的周几 getHours():获取小时 getMinu ...
原生js实现简单JSONP
JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...

原生JS制作简单的漂浮广告

原生JS制作简单的漂浮广告相关推荐

最新文章

热门文章