jQuery+CSS3流畅相册特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3流畅相册特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">

/* The page body */
html, body {
  background: #333;
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}

/* The div holding the wooden table img tag */
#wooden-table {
  position: absolute;
  left: -5000px;
}

/* The light table itself */
#lighttable {
  position: relative;
  width: 800px;
  height: 450px;
  background: #eee url(images/wooden-table.jpg);
  padding: 70px;
  margin: 0 auto;
  border: 20px solid #111;
  display: none;
}

/* Photos on the light table */
#lighttable img {
  border: 10px solid #fff;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.9);
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* The description at the top of the page */

#description {
  padding: 10px 10px 5px 10px;
  background: #111;
  color: #fff;
  width: 45em;
  margin: 0 auto -5px auto;
  text-align: center;
}

#description h1 {
  font-size: 14px;
}

#description a {
  color: #bbf;
}

</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>

<script type="text/javascript">

var newImageZIndex = 1;  // To make sure newly-loaded images land on top of images on the table
var loaded = false;      // Used to prevent initPhotos() running twice

// When the document is ready, fire up the table!
$( init );

// When the wooden table image has loaded, start bringing in the photos
function init() {
  var woodenTable = $('#wooden-table img');
  woodenTable.load( initPhotos );

  // Hack for browsers that don't fire load events for cached images
  if ( woodenTable.get(0).complete ) $(woodenTable).trigger("load");
}

// Set up each of the photos on the table

function initPhotos() {

  // (Ensure this function doesn't run twice)
  if ( loaded ) return;
  loaded = true;

  // The table image has loaded, so bring in the table
  $('#lighttable').fadeIn('fast');

  // Process each photo in turn...
  $('#lighttable img').each( function(index) {

    // Set a random position and angle for this photo
    var left = Math.floor( Math.random() * 450 + 100 );
    var top = Math.floor( Math.random() * 100 + 100 );
    var angle = Math.floor( Math.random() * 60 - 30 );
    $(this).css( 'left', left+'px' );
    $(this).css( 'top', top+'px' );
    $(this).css( 'transform', 'rotate(' + angle + 'deg)' );   
    $(this).css( '-moz-transform', 'rotate(' + angle + 'deg)' );   
    $(this).css( '-webkit-transform', 'rotate(' + angle + 'deg)' );
    $(this).css( '-o-transform', 'rotate(' + angle + 'deg)' );

    // Make the photo draggable
    $(this).draggable( { containment: 'parent', stack: '#lighttable img', cursor: 'pointer' } );

    // Hide the photo for now, in case it hasn't finished loading
    $(this).hide();

    // When the photo image has loaded...
    $(this).load( function() {

      // (Ensure this function doesn't run twice)
      if ( $(this).data('loaded') ) return;
      $(this).data('loaded', true);

      // Record the photo's true dimensions
      var imgWidth = $(this).width();
      var imgHeight = $(this).height();

      // Make the photo bigger, so it looks like it's high above the table
      $(this).css( 'width', imgWidth * 1.5 );
      $(this).css( 'height', imgHeight * 1.5 );

      // Make it completely transparent, ready for fading in
      $(this).css( 'opacity', 0 );

      // Make sure its z-index is higher than the photos already on the table
      $(this).css( 'z-index', newImageZIndex++ );

      // Gradually reduce the photo's dimensions to normal, fading it in as we go
      $(this).animate( { width: imgWidth, height: imgHeight, opacity: .95 }, 1200 );
    } );

    // Hack for browsers that don't fire load events for cached images
    if ( this.complete ) $(this).trigger("load");

  });

}

</script>

</head>
<body>

  <div id="wooden-table"><img src="images/wooden-table.jpg" alt="Wooden table image" /></div>

  <div id="description">
    <h1>CSS3��jQuery���������������Ч��</h1>
  </div>

  <div id="lighttable">
    <img src="slides/MM1.jpg" alt="MM1" />
    <img src="slides/MM2.jpg" alt="MM2" />
    <img src="slides/MM3.jpg" alt="MM3" />
    <img src="slides/MM4.jpg" alt="MM4" />
    <img src="slides/MM5.jpg" alt="MM5" />
  </div>

</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)