漂浮广告效果 源码 详解
话不多说，献上源码 源码后带有详解
html
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 400px;
height: 400px;
/*border: 1px solid red;*/
background:url("400.png");
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 0;
}
#close{
font-size: 30px;
color: red;
margin-left: 370px;
margin-top: 5px;
cursor: pointer;
}
</style>
<body>
<div id="box">
<div id="close" >X</div>
</div>
</body>
js
<script>
// 首先需要获取需要的元素
var box=document.getElementById('box');
var close=document.getElementById('close');
// 允许的top最大值 允许的left最大值
var maxleft=document.documentElement.clientWidth-box.offsetWidth;
var maxtop=document.documentElement.clientHeight-box.offsetHeight;
// 设置响应式 当窗口大小变化时获取新值
window.onresize=function () {
maxleft=document.documentElement.clientWidth-box.offsetWidth;
maxtop=document.documentElement.clientHeight-box.offsetHeight;
};
var l=5;
var t=5;
var shijian=function () {
var oldleft=box.offsetLeft;
var newleft=oldleft+l;
var oldtop=box.offsetTop;
var newtop=oldtop+t;
// 当box隐藏时三秒后再次弹出 可选
if (box.style.display=='none') {
setTimeout(function () {
box.style.display='block'
},3000)
}
// 防止滚动条
if (newtop>maxtop){
newtop=maxtop
}
if (newleft>maxleft){
newleft=maxleft
}
if (newtop<0){
newtop=0
}
if (newleft<0){
newleft=0
}
box.style.left=newleft+'px';
box.style.top=newtop+'px';
// 如果box到了最底了 让他向上弹起
if (newleft==maxleft || newleft==0) {
l=-1*l
}
if (newtop==maxtop || newtop==0) {
t=-1*t
}
};
var timer= setInterval(shijian,20);
// 当鼠标放到box上时停止移动
box.onmouseover=function () {
clearInterval(timer);
};
// 当鼠标移开时继续移动
box.onmouseout=function () {
timer= setInterval(shijian,20);
};
// 点击关闭按钮 隐藏box
close.onclick=function () {
box.style.display='none'
};
</script>
接下来开始详解
第一步 当然是div布局了
布局：
html
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 400px;
height: 400px;
/*border: 1px solid red;*/
background:url("写入自己的图片路径");
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 0;
}
#close{
font-size: 30px;
color: red;
margin-left: 370px;
margin-top: 5px;
cursor: pointer;
}
</style>
<body>
<div id="box">
<div id="close" >X</div>
</div>
</body>
大概是这个样子：
让它脱离文档流
运动效果可能是下方这个样子的：
也可能是这样的：
那么你要想的是如何获取触底呢？其实就是可视区域的高度-盒子的高度，top值如果为这个的话就代表着触底了
首先让他动起来吧：
js
<script>
// 首先需要获取需要的元素
var box=document.getElementById('box');
var close=document.getElementById('close');
var shijian=function () {
var oldleft=box.offsetLeft;
var newleft=oldleft+1;
var oldtop=box.offsetTop;
var newtop=oldtop+1;
box.style.left=newleft+'px';
box.style.top=newtop+'px';
};
timer= setInterval(shijian,20);
</script>
获取能够达到的最大宽度和高度：
// 允许的top最大值 允许的left最大值
var maxleft=document.documentElement.clientWidth-box.offsetWidth;
var maxtop=document.documentElement.clientHeight-box.offsetHeight;
调试一下：
if (newtop==maxtop){
alert('到底了！')
}
此时到底以后会弹出到底了，那么我们如何让盒子向上弹呢？
设置两个变量
如果盒子到边上让他弹起
// 如果box到了边上了 让他向上弹起 这是精简后的代码
if (newleft==maxleft || newleft==0) {
l=-1*l
}
if (newtop==maxtop || newtop==0) {
t=-1*t
}
接下来是窗口发生改变以后怎么做呢？窗体事件
// 设置响应式 当窗口大小变化时获取新值 这里直接赋值就行了
window.onresize=function () {
maxleft=document.documentElement.clientWidth-box.offsetWidth;
maxtop=document.documentElement.clientHeight-box.offsetHeight;
};
最后就是当鼠标移入盒子，就停止漂浮，移开继续漂浮，关闭按钮点击关闭
// 当鼠标放到box上时停止移动
box.onmouseover=function () {
clearInterval(timer);
};
// 当鼠标移开时继续移动
box.onmouseout=function () {
timer= setInterval(shijian,20);
};
// 点击关闭按钮 隐藏box
close.onclick=function () {
box.style.display='none'
};
作者q：2017997299;