伽然官网|AnyForWeb官网|CtrlCRM官网 博客分享:WEB技术|WEB前端|WEB视觉

如何制作一个可关闭的悬浮广告效果

2014-07-02浏览:
标签JQuery

以下代码是JquerySchool网站右下角可关闭和最小化悬浮广告效果,非常实用和常用,主要是用来展示广告,很多网站上都用得上,用法也很简单。

 

JS核心功能代码如下:

 

window.onload = function() {

   var oDiv = document.getElementById('miaov_float_layer');

   var oBtnMin = document.getElementById('btn_min');

   var oBtnClose = document.getElementById('btn_close');

   var oDivContent = oDiv.getElementsByTagName('div')[0];

 

   var iMaxHeight = 0;

 

   var isIE6 = window.navigator.userAgent.match(/MSIE 6/ig) &&!window.navigator.userAgent.match(/MSIE 7|8/ig);

 

   oDiv.style.display = 'block';

   iMaxHeight = oDivContent.offsetHeight;

 

   if (isIE6) {

       oDiv.style.position = 'absolute';

       repositionAbsolute();

       miaovAddEvent(window, 'scroll', repositionAbsolute);

       miaovAddEvent(window, 'resize', repositionAbsolute);

    }

   else {

       oDiv.style.position = 'fixed';

       repositionFixed();

       miaovAddEvent(window, 'resize', repositionFixed);

    }

 

   oBtnMin.timer = null;

   oBtnMin.isMax = true;

   oBtnMin.onclick = function() {

       startMove

                   (

                            oDivContent,(this.isMax = !this.isMax) ? iMaxHeight : 0,

                            function(){

                                oBtnMin.className = oBtnMin.className =='min' ? 'max' : 'min';

                            }

                   );

   };

 

   oBtnClose.onclick = function() {

       oDiv.style.display = 'none';

       oDiv.innerHTML = "";

   };

};

 

本文为Anyforweb技术分享博客,需要了解网站建设及更多web应用相关信息,请访问anyforweb.com



标签



订阅

欢迎订阅《AnyForWeb 程序开发》
博客


热门文章



AnyForWeb 内部博客分享

版权所有 © 2000- AnyForWeb

Oh~What’s up?

您当前访问的网站已关闭!

如需了解Web行业资讯,请进入:

如需了解Web行业资讯,请进入:伽然书院