zoukankan      html  css  js  c++  java
  • 浮广告,兼容ie、firefox,多个漂浮不冲突,调用只需两行代码

    将广告内容放在div中,设置一个id,然后用下面方法调用
    var adcls=new AdMove("div的id");
    adcls.Run();

    注意,在调用前要先引用Main.js和AdFloat.js,div也要在调用前写好,原因就不用说了吧

    或者也可以用下面方法,在页面加载完成时调用,就不用考虑位置了addEvent(window,"load",initad);
    function initad(){
    var adcls=new AdMove("div的id");
    adcls.Run();
    }


    还有两个方法一般情况下没什么用,有兴趣的可以试试,功能是设置漂浮的起始坐标和方向的,如果省掉的话是随机位置随机方向
    adcls.SetLocation(x,y)
    adcls.SetDirection(dirx,diry)


    漂浮广告的斜率是每次碰壁后随机改变的,这样就决不可能出现多个广告,起始位置和方向一致导致其中一个总是被挡住,虽然几率很小

    下面是演示代码
    <!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.onmouseover
    =function(){clearInterval(interval);}
            obj.onmouseout
    =function(){interval=setInterval(obj.CustomMethod, delay);}
        }
    }
        
    //-->
    </script>
    </head>
    <body>
        
    <div id="gg1" style="100px;height:100px;background-color:red;color:yellow">
            广告1
        
    </div>
        
    <div id="gg2" style="100px;height:100px;background-color:blue;color:yellow">
            广告2
        
    </div>
        
    <div id="gg3" style="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>
  • 相关阅读:
    in_array函数的第三个参数 strict
    主动创建缓存与被动创建缓存
    INSERT IGNORE 与INSERT INTO的区别
    说说php取余运算(%)的那点事
    继承中的类常量的使用
    Scribe 分布式日志收集系统
    PHP命令行模式基本介绍
    【C/C++】学生排队吃饭问题
    【C/C++】链表
    【C/C++】01背包问题/动态规划
  • 原文地址:https://www.cnblogs.com/zxjyuan/p/1632418.html
Copyright © 2011-2022 走看看