Javacript实现一个广告飘窗或小球反弹特效
Posted m0_58510118
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javacript实现一个广告飘窗或小球反弹特效相关的知识，希望对你有一定的参考价值。
一、广告飘窗
1、先在body里添加一个div
<body>
<div id="div1"></div>
</body>2、开始编写js部分代码
1.设置div的样式。我这就用js设置。
//获取节点
var div = document.getElementById("div1");
//设置div初始位置
var offsetx = 0;
var offsety = 0;
//定义top,left每次变更的距离
var stept = 1;
var stepl = 1;
//div样式
div.style.width = "200px"
div.style.height = "200px"
div.style.background = "red";
div.style.position = "absolute";
div.style.top = offsety;
div.style.left = offsetx;2. 获取网页可视区域的宽高，可以得出div的top，left可移动范围等于可视区域减去div自身的高度
// 网页可视区域的宽高
var seeHeight = document.documentElement.clientHeight
var seeWidth = document.documentElement.clientWidth;
var maxLeft = seeWidth - 200;
var maxTop = seeHeight - 200;3.定义控制div移动的函数，为了防止div跑出可视范围之外，一开始判断offsety、offsetx(也就是div的top、left)是否大于最大的可移动范围（会超过可视范围下边或者右边），或者小于0（会超过可视范围上边或者左边）。
如果超过，就把step每次变更的距离设为负数，变为负数之后，offsety、offsetx每次加的是一个负数，这样offsety、offsetx就等于每次递减
如果没超过，则使div的top或者left继续增加
function move()
if (offsety >= maxTop || offsety < 0)
stept = -stept
if (offsetx >= maxLeft || offsetx < 0)
stepl = -stepl
offsety += stept
offsetx += stepl;
div.style.top = offsety + "px";
div.style.left = offsetx + "px";
4.定时器，使函数20毫秒执行一次
var t = setInterval(move, 20)5.添加div的移入停止，移出继续事件
div.onmouseover = function()
clearInterval(t)
div.onmouseout = function()
t = setInterval(move, 20)
二、为了代码后面使用方便，把广告飘窗做了一个封装
每次使用调用就行
divId：div的id名；
offsety：div初始距离上边的距离；
offsetx：div初始距离左边的距离；
stept：div每次垂直移动的距离；
stepl：div每次水平移动的距离；
speed：div移动速度（定时器触发间隔）；
#div1
width: 100px;
height: 100px;
background-color: red;
//圆形
border-radius: 50%;
move("div1", 100, 100, 20, 20, 50)
function move(divId, offsety, offsetx, stept, stepl, speed)
var div = document.getElementById(divId);
var offsetx = offsetx;
var offsety = offsety;
var stept = stept;
var stepl = stepl;
var width = div.offsetWidth
var height = div.offsetHeight
div.style.position = "absolute";
div.style.top = offsety;
div.style.left = offsetx;
var maxLeft = seeWidth - width;
var maxTop = seeHeight - height;
var t = setInterval(
function move1()
if (offsety >= maxTop || offsety < 0)
stept = -stept
if (offsetx >= maxLeft || offsetx < 0)
stepl = -stepl
offsety += stept
offsetx += stepl;
div.style.top = offsety + "px";
div.style.left = offsetx + "px";
, speed);
以上是关于Javacript实现一个广告飘窗或小球反弹特效的主要内容，如果未能解决你的问题，请参考以下文章