目次
弹性悬浮广告效果图
1.功能（鼠标移入移出事故、点击事故、定时器控制移动）
2.div初始样式设置
2.获取div可以移动的页面巨细
3.定时器控制移动，鼠标移入事故制止移动，鼠标移出继承移动。
4.点击事故点击让div消散
5.实现悬浮广告的完备代码
弹性悬浮广告效果图
1.功能（鼠标移入移出事故、点击事故、定时器控制移动）
div实现在页面上移动，并判定碰到页面边框反弹，鼠标移入div制止移动，鼠标移出div举行移动，点击div让它从页面消散，定时器控制它的移动。
2.div初始样式设置
- //div（广告）获取节点
- var div1 = document.getElementById("div1");
- // div(广告)初始的位置
- var offsetx = 0;
- var offsety = 0;
- //div(广告)每次移动的距离
- var stepx = 10;
- var stepy = 10;
- //div(广告)的大小
- div1.style.width="100px"
- div1.style.height="100px"
- //设置定位
- div1.style.position="absolute"
- div1.style.top = offsetx;
- div1.style.left = offsety;
- //广告图片
- div1.style.backgroundImage="url(./img/ggao.webp)"
- div1.style.backgroundSize="cover"
2.获取div可以移动的页面巨细
- //网页可视化宽高--div(广告)可以移动的区域
- var seeWidth = document.documentElement.clientWidth;
- var seeHeight = document.documentElement.clientHeight;
- //div(广告)最大可移动的宽度、高度
- var maxLeft = seeWidth -100;
- var maxTop = seeHeight -100;
3.定时器控制移动，鼠标移入事故制止移动，鼠标移出继承移动。
- //启动定时器
- var t= setInterval(move,30);
- //鼠标移入清除定时器
- div1.onmouseenter = function(){
- clearInterval(t);
- }
- //鼠标移出恢复
- div1.onmouseleave = function(){
- t = setInterval(move,30);
- }
4.点击事故点击让div消散
- //点击事件，点击后消失
- div1.onclick = function(){
- div1.style.display = "none"
- }
5.实现悬浮广告的完备代码
[code]
<script> //div（广告）获取节点 var div1 = document.getElementById("div1"); // div(广告)初始的位置 var offsetx = 0; var offsety = 0; //div(广告)每次移动的间隔 var stepx = 10; var stepy = 10; //div(广告)的巨细 div1.style.width="100px" div1.style.height="100px" //设置定位 div1.style.position="absolute" div1.style.top = offsetx; div1.style.left = offsety; // div1.style.backgroundColor="black" div1.style.backgroundImage="url(./img/ggao.webp)" div1.style.backgroundSize="cover" //网页可视化宽高--div(广告)可以移动的区域
var seeWidth = document.documentElement.clientWidth;
var seeHeight = document.documentElement.clientHeight;
//div(广告)最大可移动的宽度、高度
var maxLeft = seeWidth -100;
var maxTop = seeHeight -100; function move(){ offsetx+=stepx; offsety+=stepy; console.log(offsetx); console.log(offsety) //大于可移动的高度或到达顶部 就让移动的间隔变为它的负数 if(offsety>=maxTop||offsety=maxLeft||offsetx | 
