基于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 08 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
JavaScript canvas实现流星特效
May 20 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
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JS中操作JSON总结
2020/12/06 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python写入xml文件的方法
2015/05/08 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python基本语法练习实例
2017/09/19 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
小区环境卫生倡议书
2015/04/29 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
教你用python控制安卓手机
2021/05/13 Python
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技