jQuery页面淡入淡出效果

无须猫 的头像
3条评论发表评论N/AAttribution

开始jQuey的学习,做个小的页面淡入淡出效果玩玩。发现jQuery真的满有意思,哈哈。

最终效果看这里:http://wbell.cn/

废话不多说,上代码:

$(document).ready(function(){
//页面淡入淡出
    $("body").css("display","none");
    $("body").fadeIn("slow");
    $("a[target],a[href*='javascript'],a.lightbox-processed,a[href*='#']").addClass("speciallinks");
    $("a:not(.speciallinks)").click(function(){
      $("body").fadeOut("slow");
      $("object,embed").css("visibility","hidden");
    });
});

备注:$("a[target],a[href*='javascript'],a.lightbox-processed,a[href*='#']").addClass("speciallinks"); 这句是为了防止没有跳转的页面内链接(包括有target属性的链接,js的链接,lightbox的链接,和页面内链接#)在被点击时也淡出,那样什么都看不见了;),找出来给它们加个“speciallinks”的class,然后用$("a:not(.speciallinks)")来选择没有此class的所有链接。

另外:页面内的flash不会被fadeout,我把它用$("object,embed").css("visibility","hidden");直接隐藏掉。

但是,ie下的效果确很糟糕,有背景图的元素并不会fadeT_T。换一个思路,我在最上面覆盖一个背景色为白色的div来实现,具体代码如下:

$(document).ready(function(){
//页面淡入淡出
  $("body").append("<div id=\"mask\" style=\"background-color:white;width:100%;height:90000px;position:absolute;z-index:9999;top:0;left:0;\"></div>");
  $("#mask").fadeOut("slow");
  $("a[target],a[href*='javascript'],a.lightbox-processed,a[href*='#']").addClass("speciallinks");
  $("a:not(.speciallinks)").click(function(){
    $("#mask").fadeIn(1000);
    $("object,embed").css("visibility","hidden");
    });
});

恩,看起来好像还可以,先就这样吧:)

l华宇物流 的头像

不错的,很绚丽啊,收藏了   石家庄制冰厂

不错的,很绚丽啊,收藏了

 

石家庄制冰厂

Evance 的头像

其实并不是很推荐这种做法,因为body级别的opacity

其实并不是很推荐这种做法,因为body级别的opacity渲染是比较占浏览器资源的.

无须猫 的头像

哇,

哇, Evance老大,哈哈。
恩,所以我下面改成了用一个mask:)

发表新评论

此内容将保密,不会被其他人看见。
  • 自动将网址与电子邮件地址转变为链接。
  • 允许HTML标签:<a> <p> <span> <div> <h1> <h2> <h3> <h4> <blockcode> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> <caption>
  • 自动断行和分段。
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <as>, <as3>, <asp>, <css>, <drupal5>, <drupal6>, <html>, <js>, <php>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

更多关於格式化选项的信息

CAPTCHA
请输入问题的答案。
Fill in the blank