Javascript ライブラリの利用 jQuery cross-slide3

Js

ken burns Effect

こちらは元画像のズーム&ズームサイズからもとのサイズへ

ブラウザ表示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <script src="../jquery/jquery-1.7.2.js"></script>
    <script src="../jquery/jquery.cross-slide.min.js"></script>
 	<title>jquery</title>
   <style>
	#slideshow{
		width: 1000px;
		height: 440px;
		}
    </style>
	
<script>
$(function(){
$('#slideshow').crossSlide({
  fade: 1
}, [
  {
    src:  'cross/01.jpg',
    alt:  'fruit',
    from: '100% 80% 1x',
    to:   '100% 0% 1.7x',
    time: 3
  }, {
    src:  'cross/02.jpg',
    alt:  'apple',
    from: 'top left',
    to:   'bottom right 1.5x',
    time: 2
  }, {
    src:  'cross/03.jpg',
    alt:  'orange',
    from: '100% 80% 1.5x',
    to:   '80% 0% 1.1x',
    time: 2
  }, {
    src:  'cross/04.jpg',
    alt:  'asort',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }
], function(idx, img, idxOut, imgOut) {
  if (idxOut == undefined)
  {
    // starting single image phase, put up caption
    $('div.caption').text(img.alt).animate({ opacity: .7 })
  }
  else
  {
    // starting cross-fade phase, take out caption
    $('div.caption').fadeOut()
  }
})});

</script>
</head>
<body>
<div id="slideshow"></div>

</body>
</html>