基于JavaScript代码实现随机漂浮图片广告


Posted in Javascript onJanuary 05, 2016

在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐。

代码一:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>漂浮广告代码</title>
<style type="text/css">
#thediv
{
 z-index:100; 
 position:absolute; 
 top:43px; 
 left:2px;
 height:100px;
 width:100px; 
 background-color:red;
}
</style>
<script type="text/javascript"> 
var xPos=300; 
var yPos=200; 
var step=1; 
var delay=8; 
var height=0; 
var Hoffset=0; 
var Woffset=0; 
var yon=0; 
var xon=0; 
var pause=true; 
var interval; 
function changePos() 
{ 
 width=document.documentElement.clientWidth; 
 height=document.documentElement.clientHeight; 
 Hoffset=thediv.offsetHeight; 
 Woffset=thediv.offsetWidth; 
 thediv.style.left=(xPos+document.body.scrollLeft+document.documentElement.scrollLeft)+"px"; 
 thediv.style.top=(yPos+document.body.scrollTop+document.documentElement.scrollTop)+"px"; 
 if(yon) 
 {
  yPos=yPos+step;
 } 
 else 
 {
  yPos=yPos-step;
 } 
 if(yPos<0) 
 {
  yon=1;
  yPos=0;
 } 
 if(yPos>=(height-Hoffset)) 
 {
  yon=0;
  yPos=(height - Hoffset);
 } 
 if(xon) 
 {
  xPos=xPos + step;
 } 
 else 
 {
  xPos=xPos - step;
 } 
 if(xPos < 0) 
 {
  xon = 1;
  xPos = 0;
 } 
 if(xPos >= (width - Woffset)) 
 {
  xon = 0;
  xPos = (width - Woffset); 
 } 
} 
function start() 
{ 
 thediv.visibility="visible"; 
 interval=setInterval('changePos()',delay); 
} 
function pause_resume() 
{ 
 if(pause) 
 { 
  clearInterval(interval); 
  pause = false;
 } 
 else 
 { 
  interval = setInterval(changePos,delay); 
  pause = true; 
 } 
}
window.onload=function()
{
 thediv.style.top=yPos; 
 start(); 
}
</script> 
</head> 
<body> 
<div id="thediv"></div> 
</body> 
</html>

以上代码实现了我们的要求,红色div块能够能够在网页中随机漂浮,并且兼容各个浏览器。代码的实现过程这里就不多介绍了,如有任何问题可以跟帖留言。

代码二:JS随机漂浮广告代码具体实例

代码如下:

<!--随机漂浮广告开始-->
<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代码的位置加入下面语句就可以了

<param name="wmode" value="opaque">

例:

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

代码如下:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="165">
<param name="movie" value="banner1.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="opaque"><!--主要是这句-->
<embed src="banner1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="165"></embed>
</object>
Javascript 相关文章推荐
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 #Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 #Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 #Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 #Javascript
JavaScript原型及原型链终极详解
Jan 04 #Javascript
jQuery实现简单的点赞效果
May 29 #Javascript
jQuery+Ajax实现无刷新操作
Jan 04 #Javascript
You might like
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
javascript中length属性的探索
2011/07/31 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
js变换显示图片的实例
2013/04/16 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python模块smtplib学习
2018/05/22 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
护理专业毕业生自荐信
2014/06/15 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
扬州个园导游词
2015/02/06 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS