zoom image slider


Image slider in zooming effect will be a better option to show the images in different way. The jquery animation with css enhancement /reduction, delay monitors the sizes and speed of the image sling. View the auto demo: ( Also view the banner list here)

You may change the quantum of zoomIn & zoomOut:
Width and Height (in pixel)
Delay (for keeping stable /pause in milliseconds)
speed of the animation (in milliseconds)

SCRIPT CODE (in header):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $banner = $('.banner img') function zoomIn(){ $banner.animate({ width: 649, height: 303 }, 20000,'linear').delay(8000); $banner.promise().done(zoomOut); } function zoomOut(){ $banner.animate({ width: 0, height: 0 }, 25000,'linear').delay(4000); $banner.promise().done(zoomIn); } zoomIn(); }); </script>
HTML CODE (in body):
<div class="banner"> <img src="http://xxx.com/xx.jpg"/> </div>

No comments:

Click Here To add Comment

Post a Comment