您当前的位置:主页 > 教程合集 > Html/css网站利发国际Html/css

用jQuery实现一个网页加载时的过渡特效

发布时间:2016-02-27编辑:余斗阅读:(0)字号:
    在浏览网页的时候,我们都会有这样一个感觉,如果点开一个网页很慢,要等很久才能加载完毕,而整个过程又没有很好的过渡,我们会选择关闭这个网页,所以为了加强用户体验,很多网页在设计的时候,会选择给页面过渡过程加一个特效,比如加一个“网页正在加载中”的提示,在网页加载完成后,会提示“加载完成”,这样网页加载过渡的过程就不会显得枯燥无味。 余斗以前研究过这个效果,大部分教程都是教大家用pJax或者aJax来实现,这样不仅代码冗长,还要额外添加一个大的div框包含全部content,余斗不建议用这种方法,而推荐使用今天这个方法通过jQuery,并在body中加一段html代码就能轻松实现,效果展示: 用jQuery实现一个网页加载时的过渡特效 具体教程为: 一、加载jquery.min.js(文件在文章底部有下载链接),如果你的网页中已经有了这个js的引用,那么就可以忽略第一步,直接进入第二步

    <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
     
    二、在head中加如下js代码

    <script type="text/javascript">
    jQuery(function(){
    jQuery('#loading-one').empty().append('页面加载完毕.').parent().fadeOut('slow');
    });</script>
     
    三、在body标签后加过渡效果显示的样式html代码

    <div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(这里输入一个图片地址) no-repeat center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
    <p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中,请稍后...</p>
    </div>
     
    其中图片可加可不加,余斗加了一个滚动圆环的图片,这样显得有意思一些,大家可以点击《一个网页加载时的过渡特效展示》预览效果,文件下载地址:http://pan.baidu.com/s/1eRxAzei
关键字词jQuery 过渡特效
余斗余斗
  1. 转载请注明: 用jQuery实现一个网页加载时的过渡特效_余斗余斗_利发国际
  2. 版权声明: 本站原创文章,由 发表在 Html/css 分类下,于2016-02-27最后更新
为博客logo添加一个扫光的特效
利用CSS3实现图片的毛玻璃效果
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索