这篇文章主要介绍了 JS 随机漂浮广告代码具体实例,有需要的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!--随机漂浮广告开始-->
- <div id="float" style="position:absolute; z-index:3;(我建议大家把这里设为100,这样浮动图就不会被遮住了) left: 512px; width: 83px; top: 9px; height: 53px;">
- <img src="piaofu.gif" width="100" height="50">
- </div>
- <script type="text/javascript">
- < !--随机漂浮广告-->
- var xPos = 0,
- yPos = 0; //x,y轴坐标
- var xon = 0; //图片在x轴移动方向
- var yon = 0; //图片在y轴移动方向
- var step = 1; //移动距离
- var img = document.getElementByIdx_x("float"); //图片层
- function floatP() {
- var width = document.body.clientWidth; //浏览器宽度
- var height = document.body.clientHeight; //浏览器高度
- var Hoffset = img.offsetHeight; //图片高度
- var Woffset = img.offsetWidth; //图片宽度
- img.style.left = xPos + document.body.scrollLeft; //图片距离浏览器左侧位置
- img.style.top = yPos + document.body.scrollTop; //图片距离浏览器顶端位置
- if (yon == 0) { yPos = yPos + step; //图片在y轴方向上下移动
- } else { yPos = yPos - step;
- }
- if (yPos < 0) { //飘到顶端,沿y轴向下移动
- yon = 0; yPos = 0;
- }
- if (yPos >= (height - Hoffset)) { //飘到低端,沿y轴向上移动
- yon = 1; yPos = (height - Hoffset);
- }
- if (xon == 0) { //x轴向右移动
- xPos = xPos + step;
- } else { xPos = xPos - step; //x轴向左移动
- }
- if (xPos < 0) { //飘到左侧时沿x轴向右移动
- xon = 0; xPos = 0;
- }
- if (xPos >= (width - Woffset)) { //飘到右侧时沿x轴向左移动
- xon = 1; xPos = (width - Woffset);
- } setTimeout("floatP()", 30); //定时调用。
- } window.onload = floatP();
- </script>
- <script>
- var x = 50,
- y = 60 //浮动层的初始位置,分别对应层的初始X坐标和Y坐标
- var xin = true,
- yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上
- var step = 1 //层移动的步长,值越大移动速度越快
- var delay = 10 //层移动的时间间隔,单位为毫秒,值越小移动速度越快
- var obj = document.getElementByIdx_x("float") //捕获id为ad的层作为漂浮目标
- function floatAD() {
- var L = T = 0 //层移动范围的左边界(L)和上边界(T)坐标
- var R = document.body.clientWidth - obj.offsetWidth //层移动的右边界
- var B = document.body.clientHeight - obj.offsetHeight //层移动的下边界
- obj.style.left = x + document.body.scrollLeft //更新层的X坐标,实现X轴方向上的运动;document.body.scrollLeft为文档区域的滚动条向右拉的距离,以保证在滚动条右拉时层仍在可见范围内
- obj.style.top = y + document.body.scrollTop //更新层的Y坐标,实现Y轴方向上的运动;document.body.scrollTop为文档区域的滚动条向下拉的距离,以保证在滚动条下拉时层仍在可见范围内
- x = x + step * (xin ? 1 : -1) //通过判断层的范围决定层在X轴上的运动方向
- if (x < L) {
- xin = true;
- x = L
- } //层超出左边界时的处理
- if (x > R) {
- xin = false;
- x = R
- } //层超出右边界时的处理
- y = y + step * (yin ? 1 : -1) //通过判断层的范围决定层在Y轴上的运动方向
- if (y < T) {
- yin = true;
- y = T
- } //层超出上边界时的处理
- if (y > B) {
- yin = false;
- y = B
- } //层超出下边界时的处理
- }
- var itl = setInterval("floatAD()", delay) //每delay秒执行一次floatAD函数
- obj.onmouseover = function() {
- clearInterval(itl)
- } //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果
- obj.onmouseout = function() {
- itl = setInterval("floatAD()", delay)
- } //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果
- </script>
注意:在网页中插入 Flash 和浮动广告, 你会发现在浮动广告浮到 Flash 处时会在下面, 我们如何解决这个问题呢, 其它很简单在 flash 代码的位置加入下面语句就可以了
例:如果下面是 flash 所在位置的代码:
来源: