Prototype'sBlogScroller ПОДПИСАТЬСЯ
 
18
04
2024
Scroller
JavaScript
Code

  $('.scroller').scroller({
  element: 'a', // (string) HTML element
  direction: 'horizontal', // (string) available options: horizontal, vertical
  container: {
  name: 'inside', // (string) class name for the container
  easing: 'easeOutBack', // (string) set the easing of the animation, required: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
  duration: 800 // (int) set the speed of the easing animation in milliseconds
  },
  options: {
  margin: -20, // (int) set the margin for each element
  zoom: 1.5, // (int) zoom multiplier
  easing: ['easeOutBack', 'easeOutBounce'],
  duration: [300, 500]
  },
  onclick: function(a, img){},
  onmouseover: function(a, img){},
  onmouseout: function(a, img){}
  });

HTML
Code

  <div class="scroller">
  <div class="inside">
  <a href="#"><img src="assets/img1.jpg" alt="" /></a>
  <a href="#"><img src="assets/img2.jpg" alt="" /></a>
  <a href="#"><img src="assets/img3.jpg" alt="" /></a>
  <a href="#"><img src="assets/img4.jpg" alt="" /></a>
  <!-- etc. -->
  </div>
  </div>
views 6420 user JuicyBottom tags jQuery, scroller
Similar posts: