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 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
javascript时间函数大全
Jun 30 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
PHP ajax 分页类代码
2008/11/13 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
经典安踏广告词
2014/03/21 职场文书
献爱心倡议书
2014/04/14 职场文书
参赛口号
2014/06/16 职场文书
婚庆司仪开场白
2015/05/29 职场文书
校园开放日新闻稿
2015/07/17 职场文书
中学教师教学工作总结
2015/08/13 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS