漂浮广告，兼容ie、firefox，多个漂浮不冲突，调用只需两行代码

最新推荐文章于 2023-04-24 14:11:25 发布
最新推荐文章于 2023-04-24 14:11:25 发布
阅读量807 收藏
点赞数
分类专栏： javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>wahaha</title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <script type="text/javascript">
    <!--
//公共脚本文件 main.js
function addEvent(obj,evtType,func,cap){
    cap=cap||false;
    if(obj.addEventListener){
        obj.addEventListener(evtType,func,cap);
        return true;
    }else if(obj.attachEvent){
        if(cap){
            obj.setCapture();
            return true;
        }else{
            return obj.attachEvent("on" + evtType,func);
        }
    }else{
        return false;
    }
}
function getPageScroll(){
    var xScroll,yScroll;

    if (self.pageXOffset) {
        xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollLeft){
        xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {
        xScroll = document.body.scrollLeft;
    }

    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop){
        yScroll = document.documentElement.scrollTop;
    } else if (document.body) {
        yScroll = document.body.scrollTop;
    }

    arrayPageScroll = new Array(xScroll,yScroll);
    return arrayPageScroll;
}
function GetPageSize(){
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {    
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else {
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) {
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) {
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }    
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    if(xScroll < windowWidth){    
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
    return arrayPageSize;
}



//广告脚本文件 AdMove.js

/*
例子
<div id="Div2">
    ***** content ******
</div>

var ad=new AdMove("Div2");
ad.Run();
*/


var AdMoveConfig=new Object();
AdMoveConfig.IsInitialized=false;
AdMoveConfig.ScrollX=0;
AdMoveConfig.ScrollY=0;
AdMoveConfig.MoveWidth=0;
AdMoveConfig.MoveHeight=0;
AdMoveConfig.Resize=function(){
    var winsize=GetPageSize();
    AdMoveConfig.MoveWidth=winsize[2];
    AdMoveConfig.MoveHeight=winsize[3];
    AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll=function(){
    var winscroll=getPageScroll();
    AdMoveConfig.ScrollX=winscroll[0];
    AdMoveConfig.ScrollY=winscroll[1];
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function AdMove(id){
    if(!AdMoveConfig.IsInitialized){
        AdMoveConfig.Resize();
        AdMoveConfig.IsInitialized=true;
    }
    var obj=document.getElementById(id);
    obj.style.position="absolute";
    var W=AdMoveConfig.MoveWidth-obj.offsetWidth;
    var H=AdMoveConfig.MoveHeight-obj.offsetHeight;
    var x = W*Math.random(),y = H*Math.random();
    var rad=(Math.random()+1)*Math.PI/6;
    var kx=Math.sin(rad),ky=Math.cos(rad);
    var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);
    var step = 1;
    var interval;
    this.SetLocation=function(vx,vy){x=vx;y=vy;}
    this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}
    obj.CustomMethod=function(){
        obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
        obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
        rad=(Math.random()+1)*Math.PI/6;
        W=AdMoveConfig.MoveWidth-obj.offsetWidth;
        H=AdMoveConfig.MoveHeight-obj.offsetHeight;
        x = x + step*kx*dirx;
        if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);}
        if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}
        y = y + step*ky*diry;
        if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);}
        if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}
    }
    this.Run=function(){
        var delay = 10;
        interval=setInterval(obj.CustomMethod,delay);
        obj.οnmοuseοver=function(){clearInterval(interval);}
        obj.οnmοuseοut=function(){interval=setInterval(obj.CustomMethod, delay);}
    }
}

    //-->
    </script>
</head>
<body>
    <div id="gg1" style="width:100px;height:100px;background-color:red;color:yellow">
        广告1
    </div>
    <div id="gg2" style="width:100px;height:100px;background-color:blue;color:yellow">
        广告2
    </div>
    <div id="gg3" style="width:100px;height:100px;background-color:green;color:yellow">
        广告3
    </div>
    <script type="text/javascript">
    <!--
        var ad1=new AdMove("gg1");
        ad1.Run();
    var ad2=new AdMove("gg2");
        ad2.Run();
    var ad3=new AdMove("gg3");
        ad3.Run();
    //-->
    </script>
</body>
</html>
黑色的熊猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
漂浮广告代码(点击可关闭)
07-14
实现漂浮广告，点击图片可以跳转到广告页面，点击关闭可以关闭广告
可关闭漂浮广告(可n个，易扩展)
11-08
JS可关闭的漂浮广告，带关闭按钮，可以多个同时飘，扩展方便。如有问题，请评论反馈，谢谢！
兼容的漂浮广告(js)
rhlwidrhl的专栏
07-05 412
wahaha //公共脚本文件 main.jsfunction addEvent(obj,evtType,func,cap){    cap=cap||false; if(obj.addEventListener){    obj.addEventLis
漂浮广告可关闭
weixin_33716154的博客
08-14 311
<%--Keymo,漂浮广告--%><SCRIPTtype="text/javascript"> // 这是关闭飘浮广告的宽度，请根据你的广告内容而定 var hbcms_ad_width = 100; // 这是关闭飘浮广告的代码，可以换成图片，点击即可关闭 var hbcms_close_str = '<d...
漂浮广告，关闭按钮
weixin_34085658的博客
10-16 159
Code<%@ControlLanguage="C#"AutoEventWireup="true"Inherits="controls_floatad"Codebehind="floatad.ascx.cs"%><scripttype="text/javascript">functionhidefudongand(){document.getEleme...
漂浮广告JS代码
11-20
8. **浏览器兼容性**：确保你的JavaScript代码兼容主流浏览器，包括Chrome、Firefox、Safari、Edge和Internet Explorer等。 9. **测试与调试**：在实际部署前，对各种浏览器和设备进行充分的测试，确保广告功能正常...
同时漂浮多个图片广告的JS特效
12-31
7. **兼容性考虑**：由于不同的浏览器可能对JS和CSS支持程度不同，开发者需要确保代码在主流浏览器如Chrome、Firefox、Safari、Edge和Internet Explorer等上都能正常工作。 8. **性能优化**：为了不影响用户浏览...
w3c漂浮qq代码
02-19
【标题解析】：“w3c漂浮qq代码”这个标题提到了两个关键概念：W3C和漂浮QQ代码。W3C（World Wide Web Consortium）是互联网标准制定组织，负责确保网页技术的标准化和互操作性。漂浮QQ代码则指的是在网页上实现的一...
jQuery做浮动层/浮动广告/漂浮
08-11
5. **兼容性**：描述中提到该插件在ie6/ie7/ie8/firefox下都能用，这表明开发者已经考虑了浏览器兼容性问题。在旧版本的Internet Explorer中，可能需要使用特定的CSS hack或jQuery的兼容模式来确保正常工作。 6. **...
jquery全屏漂浮广告插件，可点击关闭
04-07
jquery全屏漂浮广告插件，可点击关闭
js 随机漂浮的广告
05-01
广告随机飘浮 鼠标移上去停止飘浮 在IE 和FF测试通过
js物理弹性漂浮广告
03-12
js物理弹性漂浮广告
vue实现移动端悬浮窗效果
12-08
本文讲述，在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。 相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 效果图 实现步骤 1.html 总结了一下评论，好像发现大家都碰到了滑动的问题。就在这里提醒一下吧。
Vue在页面右上角实现可悬浮/隐藏的系统菜单
01-21
这是个大多数网站很常见的功能，点击页面右上角头像显示一个悬浮菜单，点击页面其他位置或再次点击头像则菜单隐藏。 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了，但是对只刚粗看了一遍vue文档的菜鸟来说，坑还是要亲自踩过才算圆满。 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能，因此路由暂未涉及。 基本思路是：通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。其中在父组件的绑定click事件中，将传入子组件的showCancel值重置。 这里就涉及第一个小知
JS全屏漂浮广告、移入光标停止移动
weixin_34400525的博客
12-06 287
点击这里查看效果以下是代码： 1 &lt;!DOCTYPE HTML&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 5 &lt;title&gt;JS全屏漂浮广告-柯乐义&lt;/t
vue实现浮动广告（浏览器范围内匀速移动）
qq_38210427的博客
04-24 558
【代码】vue实现浮动广告（浏览器范围内匀速移动）
html 上下广告悬浮,JS上下自动漂浮广告，可关闭
weixin_32346177的博客
06-25 808
一不懂开发的朋友，需要一个左右浮动显示的广告，网上找了一个，放在这里，希望对大家有用。很简单，只是想能给大家节省一部分时间// 这是关闭飘浮广告的宽度，请根据你的广告内容而定var hbcms_ad_width = 100;// 这是关闭飘浮广告的代码，可以换成图片，点击即可关闭var hbcms_close_str = '关闭';// 设置左边的广告代码,请自己更换图片地址，或换成flash，或...
写一个js漂浮广告代码
最新发布
05-20
以下是一个简单的JS漂浮广告代码： ```javascript // 设置广告图片路径和链接地址 var adImgSrc = "广告图片路径"; var adLinkUrl = "广告链接地址"; // 创建广告图片元素 var adImg = document.createElement(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值