SHOW:
|
|
- or go back to the newest paste.
| 1 | <!-- | |
| 2 | Everything in here is required for the effect to work. | |
| 3 | - | This is the source code for both the effects. |
| 3 | + | This is the source code for the vertical effect. |
| 4 | ||
| 5 | author Gecko @RSTForums.com | |
| 6 | --> | |
| 7 | ||
| 8 | <!-- Stylesheet --> | |
| 9 | <style> | |
| 10 | .container {
| |
| 11 | overflow: hidden; | |
| 12 | - | width: 400px; /* Container width */ |
| 12 | + | |
| 13 | } | |
| 14 | .container img {
| |
| 15 | position: relative; | |
| 16 | } | |
| 17 | </style> | |
| 18 | ||
| 19 | <!-- Markup --> | |
| 20 | <div class="container"> | |
| 21 | <img src="http://www.g3x0.com/rst/images/mago-huge.jpg" /> | |
| 22 | </div> | |
| 23 | ||
| 24 | <!-- jQuery --> | |
| 25 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| 26 | ||
| 27 | <!-- Hover Zoom Effect --> | |
| 28 | <script> | |
| 29 | $(function() {
| |
| 30 | var container = $(".container");
| |
| 31 | ||
| 32 | container.mousemove(function(e) {
| |
| 33 | var parentOffset = $(this).offset(); | |
| 34 | var y = e.pageY - parentOffset.top; | |
| 35 | - | var x = e.pageX - parentOffset.left; |
| 35 | + | |
| 36 | ||
| 37 | if (image.height() > $(this).height()) | |
| 38 | image.css({ top: - y / $(this).height() * image.height() + y + 'px' });
| |
| 39 | - | // Vertical |
| 39 | + | |
| 40 | ||
| 41 | }); | |
| 42 | - | |
| 42 | + |