留言板记得邮件哦 arthuridea[at]gmail.comRSS订阅
<<  [微软MSDN]Internet Explorer CSS兼容性列表 | 首页 | 换个favicon，换个心情~  >>

[教程]Blogbus模板制作（4）——自定义页面载入的loading风格 - [电脑技术]

    似乎很久没有写关于blogbus模板的教程了。这次写一篇页面效果的。算是当初预定的“画龙点睛”篇的开篇吧。

    这次任务的目标是使blog在载入完成之前显示一个模态（所谓模态就是在这个阶段未执行完毕时无法进入下一个阶段的操作）的Loading字样。待页面载入完毕灰色的模态层消失。

    实现的思路很简单，在页面里加入一个loading的元素，然后页面加载完成就去掉它！

    首先是找素材，我这里就直接应用blogbus后台管理中thickbox自带的loading图标了。

    地址是：http://www.blogbus.com/user/images/loadingAnimation.gif 

    如果不想用这个素材，可以到这里去找：http://www.ajaxload.info/

    然后就是为模态层书写相应的css。打开CSS，在末尾追加以下样式：

    #load{
          width:100%;
          height:100%;
          background:#000 url(http://www.blogbus.com/user/images/loadingAnimation.gif) no-repeat 50% 50%;
          opacity:0.5;/*标准浏览器支持 ie6不支持*/
          position:fixed;
          z-index:1000;
   }

    打开HEAD，在最下面追加

    <!--[if IE]>
    <style type="text/css">
    #load{
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity='50');
        position:absolute;
        z-index:1000;
    }
    </style>
    <![endif]-->
    <script type="text/javascript">
        //<![CDATA[
        function onloading(){setTimeout(function(){var  o=document.getElementById("load");o.parentNode.removeChild(o);},1200);}
        if(window.addEventListener){window.addEventListener("load", onloading, false);}
        else if (window.attachEvent){window.attachEvent("onload", onloading);}
        else {window.onload = onloading;}
       //]]>
    </script>

      被if IE包围的条件注释部分是只有IE能识别的代码块，可以加在html内，用以区分针对IE浏览器的代码。对IE应用CSS滤镜，实现半透明的效果。接下来的js代码用来在载入完成后的1.2s清除id为load的DOM元素。

     然后，主角该登场了（大家给点掌声嘛~~）！进入INDEX和DETAIL，分别在代码顶部加入

    <div id="load"></div>

    恩！大功告成，去试一下看吧~~

    总结：这个小技巧不难实现，跨浏览器兼容性也不错，但是在页面内添加了无意义的标签，这似乎有些不符合Web标准所倡导的精神了。

 


历史上的今天：


随机文章：


收藏到：Del.icio.us




Tag：原创空间 设计 Web标准 blog模板 blogbus模板
引用地址：
Arthuridea 发表于14:53:06 | 编辑 | 继续话题 | 转发 | 分享　0

关闭

RSS 什么是RSS？
用IM提醒我内容更新
订阅到QQ邮箱
订阅到鲜果阅读器
订阅到Google阅读器
订阅到抓虾阅读器

关闭

Arthuridea[at]gmail.com

Replace [at] with @