爱溜达

芯三角科技 山西网站制作 软件开发
www.trianglechip.com
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

分享一个时下很流行的JS特效(根据滚动条下拉滚动位置来显示和加载图片...)

Posted on 2011-05-09 09:46  爱溜达  阅读(1721)  评论(5)    收藏  举报
最近在浏览一些网站的时候发现，有些站点的图片不是一次性都显示出来，而是随着滚动条下拉过程，逐步显示（按需显示）
效果非常好，明显感觉页面加载快多了，尤其是图片列表页，尤为明显，而且显示效果有淡入淡出，很美观，于是网上搜了一下，找到如下代码，发出来分享给大家，由于第一次在博客园发文，不足之处大家多多指教，谢谢
优点：大大加大网页加载速度。并且淡入淡出的效果还能提高客户体验。
说明：代码中所用图片由于时效性关系，可能失效，请使用者自行替换
View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
 $(function(){
  var $winH = $(window).height();
  var $img = $("#show img");
  var $imgH = parseInt($img.height()/2);
  var $srcDef = "http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif";
  runing();
  $(window).scroll(function(){
   runing();
  })
  function runing(){
   $img.each(function(i){
    var $src = $img.eq(i).attr("original");
    var $scroTop = $img.eq(i).offset();
    if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
    {
     if($img.eq(i).attr("src") == $srcDef){
      $img.eq(i).hide();
     }
     $img.eq(i).attr("src",function(){return $src}).fadeIn(300);
    }
   })
  }
 })
</script>
<style type="text/css">
 *{ border:0;}
 a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}
</style>
</head>
<body>
 <div id="show">
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
    </div>
</body>
</html>