放在桌面上的相册效果jquery+css3代码

    木质的桌面背景，上面随机摆放着图片，图片可以拖动，并且拖动时，图片的Z轴会处于最高。相册还带投影。本相册效果采用jquery和css3写成。
1、css代码：

<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>

2、js代码：

<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.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>

3、html代码：

<div id="wooden-table"><img src="images/wooden-table.jpg" alt="Wooden table image" /></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>

注：建议将js代码和css代码放在单独文件，引入进来。



部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！