JS漂浮广告完善效果
时间：5年前 阅读：5705
1、直接代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#dd{
width: 540px;
height: 280px;
border: 1px solid blue;
background: url(../zb_users/upload/2019/03/201903251553520348126785.jpg) no-repeat;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var dd = document.getElementById('dd');
var tt = document.getElementById('tt');
// clientHeight 获得可视区域的宽高
var ks1 = document.documentElement.clientHeight;
// 获得可视区域的宽度
var ks2 = document.documentElement.clientWidth;
// 计算可以达到的最大的top和left值
// 可视的高度减去这个图片元素本身的高度offsetHeight(就是从上到底的高度)
var jd = ks1 - dd.offsetHeight;
// 可视性的宽度减去这个元素本身的宽度（就是从左到右的宽度）
var kd = ks2- dd.offsetWidth;
// ## 假如x=1或y=1; 1调成5就不能正常显示,因为假如比如高度是309,你一次加5就不能正好到309下面再做判断就不成立了,就控制不住了。所以要在将新值赋值回去之前先做一个判断
// var x=1,y=1;
var x=5,y=5;
// 定时器调用的函数开始 为了方便调用，先把定时器独立出来
// 先给取个名字叫ww
function ww(){
// 获得旧的left和top值 offsetLeft;如果是没有定位的元素,参照于离它最近的有定位属性的元素来获得结果
var kk = dd.offsetLeft;
var ww = dd.offsetTop;
// 计算新的left和top值
// var kkt = kk+1;
// 把1改成x可变量 在抓元素上面写 x=1 ,y=1
var kkt = kk+x;
// var wwt = ww+1;
var wwt = ww+y;
// ## 在这里先做一个判断
// 假如新的值大过可视最大值 ,那么最新的值就等于最大的值
if (wwt>jd) {
wwt=jd;
}
if (kkt>kd) {
kkt=kd;
}
// 判断最大的还要判断最小的才行,要不然小的时候控制不住变负数了
if (wwt<0) {
wwt=0;
}
if (kkt<0) {
kkt=0;
}
// 将新值赋值回去
dd.style.left = kkt+'px';
dd.style.top = wwt+'px';
if (wwt==jd) {
// 从上到下到底后减top值
y=-5;
}
// wwt==0到顶后又加1,把top变大
if (wwt==0) {
y=5;
}
// left走到最大最右后减1
if (kkt==kd) {
x=-5;
}
// left走回到最小最左后加1
if (kkt==0) {
x=5;
}
}
// 定时器调用的函数结束
// 调用定时器 这个可以用局部var
var nn = setInterval(ww,10);
// 设置定时器,每隔一段时间就改变一下left和top
// nn = setInterval(function(){
//// 获得旧的left和top值 offsetLeft;如果是没有定位的元素,参照于离它最近的有定位属性的元素来获得结果
// var kk = dd.offsetLeft;
// var ww = dd.offsetTop;
//
//// 计算新的left和top值
//// var kkt = kk+1;
//// 把1改成x可变量 在抓元素上面写 x=1 ,y=1
// var kkt = kk+x;
//// var wwt = ww+1;
// var wwt = ww+y;
//// 将新值赋值回去
// dd.style.left = kkt+'px';
// dd.style.top = wwt+'px';
// if (wwt==jd) {
//// 从上到下到底后减top值
// y=-1;
// }
//// wwt==0到顶后又加1,把top变大
// if (wwt==0) {
// y=1;
// }
//// left走到最大最右后减1
// if (kkt==kd) {
// x=-1;
// }
//// left走回到最小最左后加1
// if (kkt==0) {
// x=1;
// }
// },10)
// 定时器结束
// 给dd加移入事件 onmouseover 用户鼠标移入元素时触发的事件
dd.onmouseover = function(){
// 停止定时器 当鼠标移动到就停止
clearInterval(nn);
}
// 给dd加移出事件
dd.onmouseout = function(){
// 恢复定时器 这个用全局定时器
nn = setInterval(ww,10);
}
// 做一个点击关闭
// tt的单击事件
tt.onclick = function(){
// 让广告隐藏 在抓元素那里先抓tt这个元素要不然关不掉
dd.style.display = 'none';
}
// 浏览器窗口改变事件 onresize 事件会在窗口或框架被调整大小时发生
window.onresize = function(){
// 让广告归位
dd.style.left = 0;
dd.style.top = 0;
// 归位变0后，怕它-5成负数飘走 到0后加 为了严谨的写法
x=5,y=5;
// 我们的窗口发生改变了,当然也要从新获得一下可视大小值重新计算可以到达最大的left和top值
// clientHeight 获得可视区域的宽高
var ks1 = document.documentElement.clientHeight;
// 获得可视区域的宽度
var ks2 = document.documentElement.clientWidth;
// 计算可以达到的最大的top和left值
// 可视的高度减去这个图片元素本身的高度offsetHeight(就是从上到底的高度)
// 上面要加到这个局部变量改一下var,设成全局变量要不然只能作用在这里上面抓不到
jd = ks1 - dd.offsetHeight;
// 可视性的宽度减去这个元素本身的宽度（就是从左到右的宽度）
kd = ks2- dd.offsetWidth;
}
}
</script>
</head>
<body>
<div id="dd">
<img src="https://www.qiquanji.com/data/img/dmj/201903251553520411176789.jpg" alt="" id="tt"/>
</div>
</body>
</html>
上面代码效果图：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论