首頁 > 建站 > 前端技術

相容IE和Firefox且可設置多個的漂浮廣告

來源：互聯網
上載者：User
關鍵字 網頁製作 Ajax JavaScript
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<! 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>建站教學網-網頁特效-視窗特效-相容IE和Firefox且可設置多個的漂浮廣告</title>


<meta HTTP-equiv="content-type" content="text/html;charset=gb2312">


<!--把下面代碼加到<head>與</head>之間-->


<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>


<!--把下面代碼加到<body>與</body>之間-->


<div id="gg1" style="width:100px;height:100px;background-color:red;color:yellow">


  建站教學網


</div>


<div id="gg2" style="width:100px;height:100px;background-color:blue;color:yellow">


 www.jzread.com


</div>


<div id="gg3" style="width:100px;height:100px;background-color:green;color:yellow">


  HTTP://www.jzread.com


</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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ie utf java ie disable ie ie java ie utf8 install ie ubuntu java plugin ie
相關文章
輸入框自動適應寬度
讓IE支援CSS3圓角的方法
css position用法與導致頁面變形js處理方法
CSS實現的透明效果
IE8中text-align:center偏左的解決辦法
DIV+CSS還能走多遠

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More