Ein jQuery-Beispiel aus der Kategorie Fingerübungen. In dieser Kategorie werde ich in unregelmässigen Abständen Code-Schnippsel oder Mini-Applikationen veröffentlichen die es wahrscheinlich nie zu eigenen Projektstatus schaffen werden, aber trotzdem einige Aspekte enthalten die es Wert sind aufgeschrieben zu werden.
Dieses kleine Demo ist ein gutes Beispiel für die Ausdruckskraft von Javascript in Kombination mit jQuery.
Interessant an der Umsetzung ist der Fakt das keinerlei Pixel berechnet werden, es wird nicht mit Canvas oder Image-Transformationen gearbeitet, sondern einfach ein DIV-Tag clever mit CSS kombiniert. Die Basisideee (die nicht von mir ist) besteht darin die CSS-Property background-position dieses DIV-Tags zu manipulieren. Außerdem wird das quadratische DIV-Tag mittels der CSS-Property border-radius „Rund“ gemacht.
Alles was Sie in diesem Demo sehen ist mit 77 Zeilen Javascript erledigt. Dazu kommen noch 20 Zeilen HTML und 60 Zeilen CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
$(document).ready(function() { // picture URLs of some cuties var URLs = [ 'http://farm6.staticflickr.com/5085/5275801576_57718507fd_b.jpg', 'http://farm8.staticflickr.com/7178/7131405175_45f1b7ddb8_b.jpg', 'http://farm8.staticflickr.com/7020/6751571539_35353cd22d_b.jpg', 'http://farm3.staticflickr.com/2560/4189239614_64f4cc0b46_o.jpg', 'http://farm3.staticflickr.com/2488/3684369721_1f2b864033_o.jpg', 'http://farm5.staticflickr.com/4105/5022054910_e01eb5e820_o.jpg' ]; // render image picker $.each(URLs, function (index, url) { $('<img src="' + url + '"/>').appendTo('#thumbs'); }); // create magnifying lens var lens = $('<div class="lens"></div>').appendTo('body'); // pick image $('#thumbs img').click(function(evt) { evt.stopPropagation(); var src = $(evt.currentTarget).attr('src'); lens.css('background-image', 'URL("' + src + '")'); $('#picture').hide().attr('src', src).fadeIn(800); }); // initially pick one random image $($('#thumbs img')[(Math.random()*URLs.length)|0]).trigger('click'); $('body').mousemove(function(evt) { // handle lens movement var x = evt.pageX, y = evt.pageY; var picture = $('#picture'); var pos = picture.offset(); if (x < (pos.left - 30) || x > (pos.left + picture.width() + 30) || y < (pos.top - 30) || y > (pos.top + picture.height() + 30)) { lens.hide(); } else { var magnifyBy = picture[0].naturalWidth/picture.width(); var bgPos = (100+(magnifyBy*(200-x))|0)+'px '+(100+(magnifyBy*(100-y))|0)+'px'; lens.css({top: y-100, left: x-100, 'background-position': bgPos}); lens.show(); } }); var snapshotRing = []; var snapshots = 0; var SNAPSHOT_CAPACITY = 7; $('body').click(function(evt) { // take snapshot var pos = lens.offset(); // simulate the release of an objective lens var clone = lens.clone().appendTo('body'); clone.css('background', 'black').animate({opacity:0.6}, 'fast', function() { $(this).remove() }); // create a snapshot element var snap = lens.clone().appendTo('body').addClass('snapshot').css('opacity', 0.2); // move snapshot in place var delta = { top: 200 + 180*Math.sin(2*Math.PI*snapshots/SNAPSHOT_CAPACITY) - pos.top, left: 950 + 180*Math.cos(2*Math.PI*snapshots/SNAPSHOT_CAPACITY) - pos.left}; snap.animate({top:'+=' + delta.top, left:'+=' + delta.left, opacity:1}, 500); // remove old snapshot from the "ring buffer" snapshots++; snapshotRing.push(snap); if (snapshotRing.length > SNAPSHOT_CAPACITY) { snapshotRing[0].fadeOut(function() {$(this).remove()}); snapshotRing.splice(0,1); } }); }); |
Der Animator hat wieder zugeschlagen! Wenn jemand optisch ansprechende Javascript-Beispiele zaubern kann, dann du. Nur wo sind die Pinguine? 😉
Ich finde es immer wieder faszinierend, dass etwas, das so einfach ist, einen so großen Effekt bringt.