基于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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
Vue 数据绑定的原理分析
Nov 16 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
学习python (2)
2006/10/31 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
python 基于opencv去除图片阴影
2021/01/26 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
Java如何格式化日期
2012/08/07 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
养成教育经验材料
2014/05/26 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
先进学校事迹材料
2014/12/30 职场文书
预备党员个人总结
2015/02/14 职场文书
思品教学工作总结
2015/08/10 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL