原生js漂浮广告效果
静态页面代码
<body>
<div id="box">
<img src="1.jpg" alt="">
</div>
</body>
css样式
*{
padding: 0;
margin: 0;
}
#box{
width: 200px;
height: 200px;
border: solid 1px black;
position: absolute;
top: 0;
left: 0;
background: url("../../img/20160912160251944.jpg")no-repeat;
}
img{
width: 20px;
height: 20px;
float: right;
}
这些样式只供参考，可根据个人喜好更改
js代码区域
//获取元素
var box = document.getElementById('box');
var close = document.getElementsByTagName("img")[0];
//允许的left最大值
var maxleft = document.documentElement.clientWidth-box.offsetWidth;
//允许的top最大值
var maxtop= document.documentElement.clientHeight-box.offsetHeight;
//设置一下响应式 当屏幕变化的时候获取新值
window.onresize=function () {
maxleft = document.documentElement.clientWidth-box.offsetWidth;
maxtop= document.documentElement.clientHeight-box.offsetHeight;
}
//距上距离每次变化的值 单位px
var t=4;
//距左距离每次变化的值 单位px
var l=4;
//漂浮函数
function piaofu() {
//获取初始距左的距离
var oldleft=box.offsetLeft;
//设置新距左的距离
var newleft =oldleft+l;
//获取初始距上的距离
var oldtop=box.offsetTop;
//设置新距上的距离
var newtop =oldtop+t;
//如果距上的距离超过高度最大值，重新赋值为高度最大值
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";
//进行判断
if(newtop==maxtop ||newtop==0){
t=-1*t;
}
if(newleft==maxleft ||newleft==0){
l=-1*l;
}
// if(box.style.display=="none"){
// setTimeout(function () {
// box.style.display="block"
// },3000)
// }
}
//设置定时器
var timer= setInterval(piaofu,20)
//当鼠标放上的时候清楚定时器
box.onmouseover=function () {
clearInterval(timer)
}
//当鼠标移走的时候定时器继续
box.onmouseout=function () {
timer= setInterval(piaofu,20)
}
//当点击关闭按钮时隐藏
close.onclick=function () {
box.style.display='none'
}
以上这些是我个人的想法，欢迎大家进行讨论、提出意见或建议，共同进步，感谢大家的浏览！