一不懂开发的朋友,需要一个左右浮动显示的广告,网上找了一个,放在这里,希望对大家有用。

很简单,只是想能给大家节省一部分时间

// 这是关闭飘浮广告的宽度,请根据你的广告内容而定

var hbcms_ad_width = 100;

// 这是关闭飘浮广告的代码,可以换成图片,点击即可关闭

var hbcms_close_str = '

关闭

';

// 设置左边的广告代码,请自己更换图片地址,或换成flash,或换成纯文字

// 如果不希望显示左边的广告,可设置为   = '';

var hbcms_left_ad = '' + hbcms_close_str;

// 设置右边的广告代码,如果要和左边的广告一致,可设为 = hbcms_left_ad;

// 如果不希望显示右边的广告,可设置为 = '';

var hbcms_right_ad = '' + hbcms_close_str;

var delta = 0.8;

var collection;

var closeB = false;

function floaters() {

this.items = [];

this.addItem = function (id, x, y, content) {

document.write('

' + content + '

');

var newItem = {};

newItem.object = document.getElementById(id);

newItem.x = x;

newItem.y = y;

this.items[this.items.length] = newItem;

}

this.play = function () {

collection = this.items

setInterval('play()', 30);

}

}

function play() {

if (screen.width <= 800 || closeB) {

for (var i = 0; i < collection.length; i++) {

collection[i].object.style.display = 'none';

}

return;

}

for (var i = 0; i < collection.length; i++) {

var followObj = collection[i].object;

var followObj_x = (typeof (collection[i].x) == 'string' ? eval(collection[i].x) : collection[i].x);

var followObj_y = (typeof (collection[i].y) == 'string' ? eval(collection[i].y) : collection[i].y);

if (followObj.offsetLeft != (document.body.scrollLeft + followObj_x)) {

var dx = (document.body.scrollLeft + followObj_x - followObj.offsetLeft) * delta;

dx = (dx > 0 ? 1 : -1) * Math.ceil(Math.abs(dx));

followObj.style.left = followObj.offsetLeft + dx;

}

if (followObj.offsetTop != (document.body.scrollTop + followObj_y)) {

var dy = (document.body.scrollTop + followObj_y - followObj.offsetTop) * delta;

dy = (dy > 0 ? 1 : -1) * Math.ceil(Math.abs(dy));

followObj.style.top = followObj.offsetTop + dy;

}

followObj.style.display = '';

}

}

function closeBanner() {

closeB = true;

return;

}

var theFloaters = new floaters();

theFloaters.addItem('followDiv1', 'document.body.clientWidth-106', hbcms_ad_width, hbcms_right_ad);

//右面广告属性,分别是id,x,y,content

theFloaters.addItem('followDiv2', 6, hbcms_ad_width, hbcms_left_ad);

//左面广告属性,分别是id,x,y,content

theFloaters.play();

html 上下广告悬浮,JS上下自动漂浮广告,可关闭相关推荐

  1. html 飘浮移动广告层,JS全屏漂浮广告、移入光标停止移动

    本节内容: JS全屏漂浮广告 例子: 复制代码 代码示例: JS全屏漂浮广告-www.jquerycn.cn div#roll{width:100px;height:100px; background ...

  2. JS上下自动漂浮广告,可关闭

    <%--Keymo,漂浮广告--%> <SCRIPT type="text/javascript">// 这是关闭飘浮广告的宽度,请根据你的广告内容而定va ...

  3. js实现网页漂浮广告

    目前我们公司有个医盟天下的活动,需要将该活动展示在我们的网页上:然后就想到通过漂浮类似广告这种在页面首页: css样式:就是关于漂浮广告层的样式设定 div#roll{width:100px;heig ...

  4. js 让鼠标右下角有一排小字_JavaScript浮动广告代码,容纯DIV/CSS对联漂浮广告代码,兼容性非常好的js右下角与漂浮广告代码...

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮 ...

  5. 漂浮广告代码 php,DEDECMS5.7漂浮广告实例代码

    在网站上一般都有很多的广告位,只是很多人都不知道要怎么样添加,这里教给大家一种做漂浮广告的方法,也让自己的网站上有很多广告位存在. 首先在广告管理增加一个新广告,然后复制以下广告代码: var x = ...

  6. php对联广告,纯DIV/CSS对联漂浮广告代码(无JS)

    源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: .r1{width:80px;height:80px;background:red;float:right; pos ...

  7. 九月新版【自动赚钱广告机广告阅读收入】新版金多多广告机源代码看广告看新闻赚钱自动钱广告机源代码自动广告阅读收入

    csdn源码下载地址: https://download.csdn.net/download/dujiangdu123/12838803 ------------------------------- ...

  8. JS实现漂浮广告功能

    JS实现漂浮广告功能 前言 一.漂浮广告案例 前言 漂浮广告非常简单也是老案例了,在网页的设计中可直接拿去用,原理都是我之前文章所讲到的,如果有什么不明白的可以看看我之前的文章,仅供参考学习. 一.漂 ...

  9. dedecms右侧悬浮_织梦dedecms网站上添加漂浮广告

    在织梦dedecms的网站上添加漂浮广告其实很简单,这篇文章主要讲的是在织梦网站首页添加漂浮广告. 我们用本地搭建的织梦默认模板演示. 1.准备一个广告图片 准备一个广告图片,命名为漂浮.gif ,设 ...

最新文章

  1. 基于深度学习方法的图像分割,差距不止一点点
  2. 【python3的学习之路七】函数
  3. Frida 基础操作2
  4. The disk contains an unclean file system\
  5. 禁术级竞赛刷分技巧:找到跟测试集最接近的有标签样本
  6. 调用外部程序处理文件_Python使用内置方法、模块调用外部命令
  7. brackets作为html编辑器,为前端而生丨编辑器 Brackets 及配置推荐
  8. Redis数据结构——链表-linkedlist
  9. sql中截取字符串函数_SQL Server 2017中的顶级SQL字符串函数
  10. 【图像去噪】基于matlab邻域+中值滤波图像去噪【含Matlab源码 961期】
  11. Robo 3T 使用教程
  12. C语言中scanf函数的用法
  13. 树莓派4B无显示屏系统安装(Raspbian)
  14. 英语面试技巧以及准备工作
  15. siteground主机黑五优惠最低2折-2.99美元每月-vps主机-WordPress主机服务器
  16. 雷电网络 微支付通道
  17. ZJYYOJ 活字印刷(dfs)[C,C++]
  18. java例外站点添加不上,java例外站点添加不了
  19. RocEDU.阅读.写作《苏菲的世界》书摘(四)
  20. 嵌入式系统学习---------2.嵌入式系统设计过程

热门文章

  1. tpl php,簡介 *.tpl.php
  2. latex编译pdf winedt_CTEX之WinEdt编辑器相关设置
  3. 边缘检测一 一阶微分算子
  4. 1D二阶微分算子的特征值
  5. 【IEEE_Verilog-12.2】覆写模块参数的值
  6. 同一个世界,同一个梦想
  7. 华为申请“仓颉语言”商标,开发编程语言实锤?
  8. 新浪微博开放平台研究-实现微博自动评论(下)
  9. 2023年高新技术企业怎么申报认定
  10. pytorch : grad can be implicitly created only for scalar outputs