찾다
php教程php手册Bootstrap process bar 制作 iframe loading效果

最近特别喜欢Bootstrap,不仅仅因为他的简洁和漂亮,更因为他的可扩展和自定义组合效果让我着迷。 今天正好在研究iframe loading,发现bootstrap process bar的样式非常适合做loading载入的样式。 先看看演示效果:点此查看 现在来讲讲过程,其实很简单。首

最近特别喜欢Bootstrap,不仅仅因为他的简洁和漂亮,更因为他的可扩展和自定义组合效果让我着迷。
今天正好在研究iframe loading,发现bootstrap process bar的样式非常适合做loading载入的样式。

先看看演示效果:点此查看

现在来讲讲过程,其实很简单。首先先定义HTML结构

<div id="layout-left">
    <ul id="left-nav" class="nav nav-list">
        <li class="active"><a href="http://www.crackedzone.com/"><i class="icon-home"></i>Home</a></li>
        <li class="nav-header">Category</li>
        <li><a href="http://www.crackedzone.com/category/crphp"><i class="icon-globe"></i>PHP</a></li>
        <li><a href="http://demo.crackedzone.com/"><i class="icon-star"></i>DEMO</a></li>
    </ul>
</div>
<div id="loading-frame">
    <div id="loading-wrap">
        <div class="progress progress-striped active">
            <div class="bar" style="width: 0%;"></div>
        </div>
    </div>
</div>
<div id="layout-right">
    <iframe id="content" frameborder="0" name="content" src="about:blank"></iframe>
</div>

loading-Frame为Loading所在整个区域,将用于覆盖在IFrame之上,形成遮罩效果。
layout-left为左侧导航用于点击将内容显示在iframe内中。
layout-right用于存放iframe容器。
并且这几个Div用绝对定位比较合适。
所以我们定义如下样式:

#layout-left, #layout-right,#loading-frame,#loading-wrap {position: absolute;}
#layout-left{left: 0;width: 190px;z-index: 9;background-color: #ECF7FE;}
#layout-left a {font-size: 12px; font-family: "微软雅黑"}
#layout-right, #loading-frame {left: 197px;right: 0;z-index: 10; background: #FFF}
#loading-frame {background: #000; z-index: 11;}
#loading-wrap {width: 300px; left: 50%; top:40%; margin-left: -150px;}

定义样式要注意到 #loading-frame比#loading-wrap的z-index要高。
接下来就是制作loading动画效果:

var layout_left_width=190;
window.onresize = function() {
    var widths = document.body.scrollWidth-layout_left_width;
    var heights = document.documentElement.clientHeight-38;
    $("#content, #loading-frame").height(heights+25).width(widths-10);
    var heights = document.documentElement.clientHeight-38;
    $("#layout-left").height(heights+25);
}
window.onresize();
//上面此段用于保存各个区域的宽高能100%,也保证loading-frame和content的区域一样宽高。
//设置透明度遮罩层,该层大小和IFrame一样,用于遮在IFrame上,并隐藏掉。
$("#loading-frame").css('opacity', .8).hide();
var interval = 0;
//当用户点击左侧导航上的链接的时候开始出现loading效果
function loading_start() {
    if (interval) {
        clearInterval(interval);
    }
    $("#loading-frame .bar").css('width', 0);
    $("#loading-frame").show();
    var percent = 0;
    interval = setInterval(function(){
        percent += 10;
        if (percent == 100) {
            percent = 99;
        }
        if (percent <p>效果图如下:<br>
<img class="alignnone size-full wp-image-727 lazy" src="/static/imghwm/default1.png" data-src="http://www.crackedzone.com/wp-content/uploads/2012/11/bootstrap-loading-screen.jpg" alt=""    style="max-width:90%" title="bootstrap-loading-screen"  style="max-width:90%"></p>
    <p class="copyright">
        原文地址:Bootstrap process bar 制作 iframe loading效果, 感谢原作者分享。
    </p>
    
    


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기