素材网 素材网

jQuery与CSS3制作拖动照片特效

下载资源()次

阅读次数()次

发布时间:2014-06-02

jQuery与CSS3制作拖动照片特效
分享到:

用法简介:

来源:xw素材网

jQuery与CSS3制作拖动照片特效。
文件引用:

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


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。