1(function ($){ 2 3 var addCSSRule = (function(style){ 4 var sheet = document.head.appendChild(style).sheet; 5 return function(selector, css){ 6 var propText = Object.keys(css).map(function(p){ 7 return p+":"+css[p] 8 }).join(";"); 9 sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length); 10 return sheet; 11 } 12 })(document.createElement("style")); 13 14 var magnifier = function(magnifierNode) { 15 16 var self = this; 17 self.rootNode = magnifierNode; 18 self.magnifierImage = new Image(); 19 self.magnifierContent = null; 20 self.magnifierImage.src = self.rootNode.attr('magnifierImage'); 21 self.magnifierRoot = null; 22 self.currentAngleSheet = null; 23 24 self.init = function(){ 25 self.rootNode.bind('mouseenter', self.mouseover); 26 } 27 28 self.mouseover = function(event) 29 { 30 if ( self.magnifierRoot == null ) { 31 32 self.magnifierRoot = $('<svg></svg>').addClass('magnifierWrapper').attr('pointer-events', 'none'); 33 self.magnifierContent = $('<rect></rect>').addClass('magnifierContent').css('backgroundImage', 'url(' + self.rootNode.attr('magnifierImage') + ')'); 34 self.magnifierRoot.append(self.magnifierContent); 35 36 // register other handlers 37 self.rootNode.bind('mousemove', self.mousemove); 38 self.rootNode.bind('mouseout', self.mouseout); 39 40 // macht im Opera Problem ... 41 $("body").append(self.magnifierRoot); 42 } 43 44 self.mousemove(event); 45 }; 46 47 self.mousemove = function(event) 48 { 49 self.setPosition(event.pageX,event.pageY, event.offsetX, event.offsetY); 50 }; 51 52 self.mouseout = function(event) 53 { 54 var rootOffset = self.rootNode.offset(); 55 // Check Position over Element before removing! 56 if ( rootOffset.left > event.offsetX || 57 (rootOffset.left + self.rootNode.width()) < event.offsetX || 58 rootOffset.top < event.offsetY || 59 (rootOffset.top + rootOffset.height) > event.offsetY ) 60 { 61 // Clean up 62 self.rootNode.unbind('mousemove', self.mousemove); 63 self.rootNode.unbind('mouseout', self.mouseout); 64 65 if ( self.magnifierRoot ) { 66 self.magnifierRoot.remove(); 67 self.magnifierRoot = null; 68 } 69 } 70 71 }; 72 73 self.setPosition = function(x, y, contentX, contentY) 74 { 75 if ( !self.magnifierImage || !contentX || !contentY ) { 76 return; 77 } 78 79 // Background position 80 var posX = -(contentX / self.rootNode.width() * self.magnifierImage.width - self.magnifierContent.width() / 2); 81 var posY = -(contentY / self.rootNode.height() * self.magnifierImage.height - self.magnifierContent.height() / 2); 82 83 // Radial position 84 var position = (1 / self.rootNode.width() * (self.rootNode.width() - contentX)); 85 var arc = -(110 * position + 35) * Math.PI / 180; 86 87 var left0 = 202; 88 var top0 = 0; 89 90 var left = left0 * Math.cos(arc) - top0 * Math.sin(arc) - 165; 91 var top = left0 * Math.sin(arc) + top0 * Math.cos(arc) + 113; 92 var angle = 'rotate(' + (position * -110) + 'deg)'; 93 94 if ( self.currentAngleSheet != null ) { 95 $(self.currentAngleSheet).remove(); 96 } 97 98 self.currentAngleSheet = addCSSRule("div.magnifierWrapper:after,svg.magnifierWrapper:after", { 99 '-webkit-transform': angle, 100 '-moz-transform': angle, 101 '-o-transform': angle, 102 '-ms-transform': angle 103 }); 104 105 self.magnifierContent.css({ 106 'backgroundPositionX': posX, 107 'backgroundPositionY': posY, 108 'margin-left' : left, 109 'margin-top': top 110 }); 111 112 if ( !self.magnifierRoot || !x || !y ) { 113 return; 114 } 115 116 self.magnifierRoot.offset({ left:x - 18, top: y - self.magnifierRoot.height() }); 117 }; 118 }; 119 120 $(function(){ 121 $('img.magnifierImage').each(function(index, item){ 122 (new magnifier($(item))).init(); 123 }); 124 }); 125 126})(jQuery);