google_screenshot.zip

index.html

출처 : https://play.google.com/

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<style>
.screenshot-carousel {position:relative; height:400px; width:650px;}
.screenshot-carousel .screenshot-carousel-outer-container {height:400px; overflow:hidden; position:absolute; width:650px;}
.screenshot-carousel .screenshot-carousel-outer-container .screenshot-carousel-content-container {height:400px; width:10000px; white-space:nowrap;}
.screenshot-carousel .screenshot-carousel-outer-container .screenshot-carousel-content-container .screenshot-image-wrapper {
 display:inline-block; float:left;
}
.screenshot-carousel .screenshot-carousel-outer-container .screenshot-carousel-content-container .screenshot-image-wrapper .screenshot-image {
 display:inline-block; max-height:400px; max-width:250px; vertical-align:bottom; padding-right:10px; border:0; margin:0;
}
.screenshot-carousel .screenshot-carousel-button-previous,
.screenshot-carousel .screenshot-carousel-button-next,
.screenshot-carousel .screenshot-carousel-left-fade,
.screenshot-carousel .screenshot-carousel-right-fade {position:absolute;}
.screenshot-carousel .screenshot-carousel-button-previous,
.screenshot-carousel .screenshot-carousel-button-next {margin-top:184px; z-index:20; cursor:pointer;}
.screenshot-carousel .screenshot-carousel-button-previous {background:no-repeat url('images/sprites.png') -248px 0; height:32px; width:32px; display:none;}
.screenshot-carousel .screenshot-carousel-button-next {background:no-repeat url('images/sprites.png') -91px -266px; height:32px; width:32px; right:0; display:none;}
.screenshot-carousel .screenshot-carousel-left-fade,
.screenshot-carousel .screenshot-carousel-right-fade {width:50px; height:400px; z-index:10; cursor:pointer;}
.screenshot-carousel .screenshot-carousel-left-fade {display:none;}
.screenshot-carousel .screenshot-carousel-right-fade {right:0; display:none;}
/* -moz-opacity:0.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);margin-top:70px;opacity:0.4 */
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
(function($) {
 $.fn.extend({
  screenshot : function(opt) {
   var settings = {
    speed : 400
   }
   $.extend(true, settings, opt);
   
   var _this = $(this);
   var _outer = _this.find('.screenshot-carousel-outer-container');
   var _content = _outer.find('.screenshot-carousel-content-container');
   var _wrapper = _content.find('.screenshot-image-wrapper');
   var _leftFade = _this.find('.screenshot-carousel-left-fade');
   var _rightFade = _this.find('.screenshot-carousel-right-fade');
   var _btnPrev = _this.find('.screenshot-carousel-button-previous').add(_leftFade);
   var _btnNext = _this.find('.screenshot-carousel-button-next').add(_rightFade);
   var pos = 0;
   var outerWidth = _outer.width();
   //var wrapperWidth = _wrapper.eq(0).outerWidth(true);
   var wrapperWidth = _wrapper.eq(0).width();
   var contentWidth = wrapperWidth * _wrapper.length;
   _content.width(contentWidth);
   
   if(contentWidth > outerWidth) {
       _btnNext.show();
   } else {
       return false;
   }
   
   _btnPrev.on({
    'mouseenter' : function() {
     _leftFade.stop().animate({width:75}, {duration:100});
    },
    'mouseleave' : function() {
     _leftFade.stop().animate({width:50}, {duration:100});
    },
    'click' : function() {
     if(pos == contentWidth - outerWidth) {
      pos -= 450;
     } else {
      pos -= wrapperWidth * 2;
     }
     
     if(pos < 0) {
      pos = 0;
      _btnPrev.hide();
     }
     
     _outer.stop().animate({
      scrollLeft : pos
     }, {
      duration:settings.speed,
      easing : 'easeOutExpo'
     });
     _btnNext.show();
    }
   });
   
   _btnNext.on({
    'mouseenter' : function() {
     _rightFade.stop().animate({width:75}, {duration:100});
    },
    'mouseleave' : function() {
     _rightFade.stop().animate({width:50}, {duration:100});
    },
    'click' : function() {
     if(pos == 0) {
      pos += 450;
     } else {
      pos += wrapperWidth * 2;
     }
     
     if(pos + outerWidth > contentWidth) {
      pos = contentWidth - outerWidth;
      _btnNext.hide();
     }
     
     _outer.stop().animate({
      scrollLeft : pos
     }, {
      duration:settings.speed,
      easing : 'easeOutExpo'
     });
     _btnPrev.show();
    }
   });
   
  }
 });
})(jQuery);

jQuery(function($) {
 $('.screenshot-carousel').screenshot();
});
</script>

</head>
<body>

<div class="screenshot-carousel">
 <div class="screenshot-carousel-button-previous"></div>
 <img src="images/left_fade.png" class="screenshot-carousel-left-fade" />
 <div class="screenshot-carousel-outer-container">
  <div class="screenshot-carousel-content-container">
   <div class="screenshot-image-wrapper"><img src="images/screenshot5.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot1.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot2.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot3.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot4.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot1.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot2.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot3.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot4.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot1.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot2.png" class="screenshot-image" /></div>
   <div class="screenshot-image-wrapper"><img src="images/screenshot3.png" class="screenshot-image" /></div>
  </div>
 </div>
 <img src="images/right_fade.png" class="screenshot-carousel-right-fade" />
 <div class="screenshot-carousel-button-next"></div>
</div>

</body>
</html>

+ Recent posts

티스토리툴바