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


Posted in Javascript onNovember 19, 2013
<!--随机漂浮广告开始-->
<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 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
js实现楼层导航功能
Feb 23 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
JS简单实现元素复制示例附图
Nov 19 #Javascript
js获取当月最后一天实例代码
Nov 19 #Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 #Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 #Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 #Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 #Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 #Javascript
You might like
一个用php3编写的简单计数器
2006/10/09 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
web.py获取上传文件名的正确方法
2014/08/26 Python
Python中的模块和包概念介绍
2015/04/13 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python中函数参数匹配模型详解
2019/06/09 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
怎样声明接口
2014/09/19 面试题
园长自我鉴定
2013/10/06 职场文书
历史系自荐信范文
2013/12/24 职场文书
军训心得体会
2013/12/31 职场文书
魅力教师事迹材料
2014/01/10 职场文书
渡河少年教学反思
2014/02/12 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
python绘制箱型图
2021/04/27 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android