这篇文章主要介绍了JS随机漂浮广告代码具体实例,有需要的朋友可以参考一下

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.οnlοad=floatP();

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.οnmοuseοver=function(){clearInterval(itl)} //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果

obj.οnmοuseοut=function(){itl=setInterval("floatAD()", delay)} //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果

注意:

在网页中插入Flash和浮动广告,你会发现在浮动广告浮到Flash处时会在下面,

我们如何解决这个问题呢,

其它很简单

在flash代码的位置加入下面语句就可以了

例:

如果下面是flash所在位置的代码:

php 左侧飘浮广告代码,JS随机漂浮广告代码具体实例相关推荐

  1. JS随机漂浮广告代码

    <!--随机漂浮广告开始--> <div id="float" style="position:absolute; z-index:3;(我建议大家把这 ...

  2. php js漂浮,js 居中漂浮广告

    程序源码 var floatAd = {}; floatAd.getScrollTop = function(node) { var doc = node ? node.ownerDocument : ...

  3. Js弹性漂浮广告代码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. JS实现漂浮广告功能

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

  5. Js广告_全屏漂浮广告效果

    <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Conten ...

  6. 漂浮广告是什么?漂浮广告如何设置

    在上一篇文章中甲爪联盟有简短的提到了漂浮广告!漂浮广告在广告联盟中网站主和目前互联网网页广告运营的比较多,并且从效果来看漂浮广告也是非常不错的!但是个可能个别的站长对漂浮广告了解不够深,或者不知道怎么 ...

  7. php添加浮动广告,漂浮广告是什么?漂浮广告如何设置

    在上一篇文章中甲爪联盟有简短的提到了漂浮广告!漂浮广告在广告联盟中网站主和目前互联网网页广告运营的比较多,并且从效果来看漂浮广告也是非常不错的!但是个可能个别的站长对漂浮广告了解不够深,或者不知道怎么 ...

  8. html广告倒计时代码,js实现倒计时广告效果

    页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...

  9. 手机页面漂浮广告 html,网站底部漂浮广告电脑手机自适应代码纯CSS

    网站底部漂浮广告电脑手机自适应代码纯CSS;废话少说直接上干货: HTML部分: 说明文字 点击按钮 CSS样式部分: .margingT { margin-bottom: 80px; } .bott ...

  10. 原生js实现漂浮广告

    首先添加广告 <div id="ad" style="left: 0;top: 0;"> <!-- 广告图片 --><img sr ...

最新文章

  1. 2021年大数据ELK(二十三):Kibana简介
  2. linux socket完成端口,“完成端口”模型(IOCP)
  3. 转载【C】堆区和栈区的区别
  4. 推荐经典算法实现之BPMF(pymc3+MovieLen)
  5. 奖金16万!首届电子商务AI算法大赛ECAA报名开启
  6. ARM uboot中的.lds
  7. 她穿着由自己17封拒稿信做成的裙子,通过了博士论文答辩!
  8. idea代码上传到gitee组织流程
  9. 通讯录c语言以文本文件保存,学C三个月了,学了文件,用C语言写了个通讯录程序...
  10. 开课吧Java课堂:小应用程序基础是什么
  11. oracle v$context,30.Oracle杂记——Oracle常用动态视图v$session
  12. 解决在使用pip进行安装时的Could not install packages due to an EnvironmentError的问题
  13. ffmpeg编码:xavc 42210bit+mxf
  14. 基于Modbus/TCP的西门子1200PLC和STM32通信
  15. python3-爬取cnnvd漏洞库
  16. nv驱动版本linux,完善支持NV显卡Linux驱动275.19正式版,275.19增加了对
  17. redis实战(1):redis三个java客户端选择
  18. 设计模式六大原则(3):里氏替换原则
  19. itest考试切屏能检测出来吗_itest测试
  20. 「GoTeam 招聘时间」滴滴出行系统研发工程师(北京)

热门文章

  1. SetupParameter(mil)
  2. 微信公众号开发之分享功能
  3. 简单图像灰度化处理python代码
  4. (完整体系教程)使用 Arduino 控制伺服电机
  5. 朗文当代高级英语辞典android,朗文当代高级英语辞典
  6. linux下ntp服务配置
  7. 五胡十六国、东晋南北朝这280年历史,你知道多少?5000字带你看个清楚明白
  8. Unity使用ARCore开发AR程序
  9. CCA分析图如何解读_BI报表控件Wyn使用教程:如何使用网状/雷达图进行数据分析...
  10. 《黑客帝国》效果的NB数字雨