站长资源
全栈工程师站点

实例讲解之网页常见的漂浮广告是如何实现的

实例讲解之网页常见的漂浮广告是如何实现的

网页漂浮广告,大家都见到过,虽然用户体验不好,但是曝光效果显而易见,所以还是有很多人有这方面需求,大多用到这些需求都是网上找的插件来实现,难免会多出很多冗余代码,自己也不知其所以然。今天站长资源网就给大家详细讲解如何实现漂浮广告效果。

首先我们写个简单的html结构

<div id="imgAd">

   <div id="close">×</div>

   <div class="img"></div>

</div>

结构很简单,一个图片,一个关闭按钮,img里面大家自己放置图片即可,我这里直接用背景代替

写上适当的css代码

#imgAd{position:absolute;left:50px;top:60px;}
#close{width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;cursor: pointer;}
.img{width:180px;height:180px;background:red;}

先来分析一下需要实现哪些功能

一、图片从坐标零点开始向右下方移动

二、图片遇到底部或者右部开始反向运动

三、鼠标放上去要停止移动

四、点击关闭按钮,关闭广告

需求列出来了,我们就来具体分步实现

1、我们先定义两个变量来记录是否移动到边界,并设置一个移动速度

var x = true,
    y = true;
var delay = 10;

2、开始设计移动函数move()的逻辑部分

首先元素的原点,即左上角坐标为(0,0)

因此我们最大能移动到底部和右侧的距离应该为窗体的宽高减去元素的宽高

var $obj = $("#imgAd");
var R = $(window).width() - $obj.width(); //元素最大达到的右边界
var B = $(window).height() - $obj.height(); //元素最大达到下边界

因为是从左上开始移动,所以元素的左上边界都是0

var L = T = 0; //左边界和顶部边界

元素的四个边界定义好了之后,我们来让其动起来

显然需要用到定时器,我们定义一个time定时器来执行move()函数

var time = window.setInterval("move()", delay);

move()函数的具体逻辑是,元素从左上角出发,离原点的位置不断的变化,当达到最终的下边界和右边界再开始反弹

离原点的距离很好理解,我们只需要设置元素的top和left值

$obj.offset({
	top: top,
	left: left
})

而top和left的值又是变化的

我们上面定义的两个状态变量就起到了作用

x == true ? left++ : left--;
y == true ? top++ : top--;

当状态为true则不断增加left和top值,相反则不断减少

关键在于我们如何判断这个状态?

我们需要知道元素距离左上的时时距离

var left = $obj.offset().left;//元素离左边距离
var top = $obj.offset().top;//元素离上边距离

知道了时时的距离,也知道了最大边界,我们只需要判断这个距离是否达到边界即可

if (left < L) {
	x = true; //向右移动
}
if (left > R) {
	x = false; //一直到left的值大于右边界,开始向左
}
if (top < T) {
	y = true; //向下移动
}
if (top > B) {
	y = false; //一直到top的值大于下边界,开始向上
}

这样我们就完成了浮动广告的运动

以上内容我尽量用注释写的详细一些,希望大家能够消化吸收。

说完了主要逻辑,我们再来看剩下的两个需求

鼠标放上去停止,只需要清除定时器即可

$obj.mouseover(function() {
    clearInterval(time)
});

关闭就更简单了,直接移除元素

$("#close").click(function() {
    $("#close").parent().remove();
})

至此我们的页面浮动广告效果大功告成

附完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例讲解之网页常见的漂浮广告是如何实现的</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
#imgAd{position:absolute;left:50px;top:60px;}
#close{width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;cursor: pointer;}
.img{width:180px;height:180px;background:red;}
</style>
</head>
<body>
<div id="imgAd">
    <div id="close">×</div>
    <div class="img"></div>
</div>

<script>
// 定义两个变量来记录状态
var x = true,
    y = true;
// 移动的速度
var delay = 10;
// 获取元素
var $obj = $("#imgAd");
// 定义一个定时器,执行move函数
var time = window.setInterval("move()", delay);
// 鼠标移入停止
$obj.mouseover(function() {
    clearInterval(time)
});
// 鼠标移出开始
$obj.mouseout(function() {
    time = window.setInterval("move()", delay)
});
// 移动逻辑部分
function move() {
    var left = $obj.offset().left;//元素离左边距离
    var top = $obj.offset().top;//元素离上边距离
    var L = T = 0; //左边界和顶部边界
    var R = $(window).width() - $obj.width(); //元素最大达到的右边界
    var B = $(window).height() - $obj.height(); //元素最大达到下边界
    if (left < L) {
        x = true; //向右移动
    }
    if (left > R) {
        x = false; //一直到left的值大于右边界,开始向左
    }
    if (top < T) {
        y = true; //向下移动
    }
    if (top > B) {
        y = false; //一直到top的值大于下边界,开始向上
    }
    // left值不断增加,直到右边界开始递减
    x == true ? left++ : left--;
    // 同上
    y == true ? top++ : top--;
    // 重新定位元素位置
    $obj.offset({
        top: top,
        left: left
    })
}
// 关闭
$("#close").click(function() {
    $("#close").parent().remove();
})
</script>

</body>
</html>

本文有站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 实例讲解之网页常见的漂浮广告是如何实现的

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 实例讲解之网页常见的漂浮广告是如何实现的

评论 抢沙发

评论前必须登录!