JS漂浮广告代码 浮动广告代码效果实现
时间：5年前 阅读：6699
这个JavaScript漂浮广告代码是我自己学习的时候写的，不过一次只有漂一个，复制就能用了。也可以根据自已的需要修改成多个飘浮的效果（差不多每一行代码我都注释了，很容易看得懂，写得也比较完善了）。希望站长朋友喜欢。
这个是前端开发的必备的技能，实现思路及方法下面都写得很详细。Js漂浮广告代码比较经典的浮动广告，到现还很实用，如果你是一位站长的话，这种代码是必备的，希望对你有用处。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#dd{
width: 700px;
height: 450px;
border: 1px solid blue;
background: url(../zb_users/upload/2019/04/201904151555302161716963.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,20);
// 给dd加移入事件 onmouseover 用户鼠标移入元素时触发的事件
dd.onmouseover = function(){
// 停止定时器 当鼠标移动到就停止
clearInterval(nn);
}
// 给dd加移出事件
dd.onmouseout = function(){
// 恢复定时器 这个用全局定时器
nn = setInterval(ww,20);
}
// 做一个点击关闭
// 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/201904151555302357204596.jpg" alt="" id="tt"/>
</div>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论