php 左侧飘浮广告代码,JS随机漂浮广告代码具体实例
这篇文章主要介绍了JS随机漂浮广告代码具体实例,有需要的朋友可以参考一下
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.οnlοad=floatP();
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.οnmοuseοver=function(){clearInterval(itl)} //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果
obj.οnmοuseοut=function(){itl=setInterval("floatAD()", delay)} //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果
注意:
在网页中插入Flash和浮动广告,你会发现在浮动广告浮到Flash处时会在下面,
我们如何解决这个问题呢,
其它很简单
在flash代码的位置加入下面语句就可以了
例:
如果下面是flash所在位置的代码:
php 左侧飘浮广告代码,JS随机漂浮广告代码具体实例相关推荐
- JS随机漂浮广告代码
<!--随机漂浮广告开始--> <div id="float" style="position:absolute; z-index:3;(我建议大家把这 ...
- php js漂浮,js 居中漂浮广告
程序源码 var floatAd = {}; floatAd.getScrollTop = function(node) { var doc = node ? node.ownerDocument : ...
- Js弹性漂浮广告代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- JS实现漂浮广告功能
JS实现漂浮广告功能 前言 一.漂浮广告案例 前言 漂浮广告非常简单也是老案例了,在网页的设计中可直接拿去用,原理都是我之前文章所讲到的,如果有什么不明白的可以看看我之前的文章,仅供参考学习. 一.漂 ...
- Js广告_全屏漂浮广告效果
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Conten ...
- 漂浮广告是什么?漂浮广告如何设置
在上一篇文章中甲爪联盟有简短的提到了漂浮广告!漂浮广告在广告联盟中网站主和目前互联网网页广告运营的比较多,并且从效果来看漂浮广告也是非常不错的!但是个可能个别的站长对漂浮广告了解不够深,或者不知道怎么 ...
- php添加浮动广告,漂浮广告是什么?漂浮广告如何设置
在上一篇文章中甲爪联盟有简短的提到了漂浮广告!漂浮广告在广告联盟中网站主和目前互联网网页广告运营的比较多,并且从效果来看漂浮广告也是非常不错的!但是个可能个别的站长对漂浮广告了解不够深,或者不知道怎么 ...
- html广告倒计时代码,js实现倒计时广告效果
页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...
- 手机页面漂浮广告 html,网站底部漂浮广告电脑手机自适应代码纯CSS
网站底部漂浮广告电脑手机自适应代码纯CSS;废话少说直接上干货: HTML部分: 说明文字 点击按钮 CSS样式部分: .margingT { margin-bottom: 80px; } .bott ...
- 原生js实现漂浮广告
首先添加广告 <div id="ad" style="left: 0;top: 0;"> <!-- 广告图片 --><img sr ...
最新文章
- 2021年大数据ELK(二十三):Kibana简介
- linux socket完成端口,“完成端口”模型(IOCP)
- 转载【C】堆区和栈区的区别
- 推荐经典算法实现之BPMF(pymc3+MovieLen)
- 奖金16万!首届电子商务AI算法大赛ECAA报名开启
- ARM uboot中的.lds
- 她穿着由自己17封拒稿信做成的裙子,通过了博士论文答辩!
- idea代码上传到gitee组织流程
- 通讯录c语言以文本文件保存,学C三个月了,学了文件,用C语言写了个通讯录程序...
- 开课吧Java课堂:小应用程序基础是什么
- oracle v$context,30.Oracle杂记——Oracle常用动态视图v$session
- 解决在使用pip进行安装时的Could not install packages due to an EnvironmentError的问题
- ffmpeg编码:xavc 42210bit+mxf
- 基于Modbus/TCP的西门子1200PLC和STM32通信
- python3-爬取cnnvd漏洞库
- nv驱动版本linux,完善支持NV显卡Linux驱动275.19正式版,275.19增加了对
- redis实战(1):redis三个java客户端选择
- 设计模式六大原则(3):里氏替换原则
- itest考试切屏能检测出来吗_itest测试
- 「GoTeam 招聘时间」滴滴出行系统研发工程师(北京)