1/** 2 * sliphover v2.0.2 3 * require jquery 1.7+ 4 * wayou June 24, 2014, 5 * MIT License 6 * for more info pls visit :https://github.com/wayou/SlipHover 7 */ 8 9; 10(function($, window, document, undefined) { 11 12 // Create the defaults once 13 var pluginName = "sliphover", 14 defaults = { 15 target: 'img', //the element that the overlay will attach to 16 caption: 'title', //the caption that will display when hover 17 duration: 'fast', //specify how long the animation will lasts in milliseconds 18 fontColor: '#fff', 19 textAlign: 'center', //display the caption left, center or right 20 verticalMiddle: true, //display the caption vertical middle or not 21 backgroundColor: 'rgba(0,0,0,.7)', //specify the background color and opacity using rgba 22 reverse: false, //reverse the direction 23 height: '100%', //specify the height of the overlay 24 withLink: true //if image is wraped with a link the overlay will be clickable, set false to disable click 25 }; 26 27 function SlipHover(element, options) { 28 this.element = element; 29 this.settings = $.extend({}, defaults, options); 30 this._defaults = defaults; 31 this._name = pluginName; 32 this.version = 'v2.0.3'; 33 this.init(); 34 } 35 36 SlipHover.prototype = { 37 init: function() { 38 39 //disable on touch devices 40 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 41 return; 42 } 43 44 var that = this, 45 target = this.settings.target; 46 47 //create the overlay container each time the mouse enters 48 $(this.element).off('mouseenter.sliphover', target).on('mouseenter.sliphover', target, function(event) { 49 //fix #9 https://github.com/wayou/SlipHover/issues/9 50 //use this instead of event.target for sometimes the event.target is not retriving the right target we want 51 //http://stackoverflow.com/questions/9838137/event-target-jquery-on-mousedown-up-is-not-giving-the-dom-specified-by-selecto 52 var $element = $(this), 53 $overlayContainer = that.createContainer($element); 54 55 $overlayContainer.off('mouseenter.sliphover mouseleave.sliphover').on('mouseenter.sliphover mouseleave.sliphover', function(event) { 56 //if (!$overlayContainer) return; 57 var direction = that.getDirection($(this), event); 58 59 //check if reverse option is on 60 direction = that.settings.reverse ? direction = (direction + 2) % 4 : direction; 61 62 if (event.type === 'mouseenter') { 63 //check if the previous overlay still exists before we create it
64 var $overlay = $overlayContainer.find('.sliphover-overlay'); 65 if (!$overlay.length) { 66 $overlay = that.createOverlay(that, direction, $element); 67 //put the overlay into the container 68 $(this).html($overlay); 69 } 70 that.slideIn(that, $overlay); 71 } else { 72 //slide out based on the direction 73 that.removeOverlay(that, $(this), direction); 74 } 75 }); 76 }); 77 }, 78 createContainer: function($element) { 79 //get the properties of the target 80 var top = $element.offset().top, 81 left = $element.offset().left, 82 //border = parseFloat($element.css("border-left-width")), 83 width = $element.outerWidth(), 84 height = $element.outerHeight(); 85 zIndex = $element.css("z-index");
86 var $overlayContainer = $('<div>', { 87 class: 'sliphover-container' 88 }).css({ 89 width: width, 90 height: height, 91 position: 'absolute', 92 overflow: 'hidden', 93 top: top, 94 left: left, 95 borderRadius: $element.css('border-radius'), //in case the target has a round border, this will make the overlay more nicer 96 zIndex: zIndex == +zIndex ? (zIndex + 1) : 999 // if the z-index of the target is not number then use 999 97 }); 98 99 $overlayContainer.data('relatedElement', $element); 100 //$element.closest('a').append($overlayContainer); 101 $('body').append($overlayContainer); 102 103 return $overlayContainer; 104 }, 105 createOverlay: function(instance, direction, $element) { 106 107 var bottom, left, $overlay, content, $targetAParent; 108 109 switch (direction) { 110 case 0: 111 //from top 112 left = 0; 113 bottom = '100%'; 114 break; 115 case 1: 116 //from right 117 left = '100%'; 118 bottom = 0; 119 break; 120 case 2: 121 //from bottom 122 left = 0; 123 bottom = '-100%'; 124 break; 125 case 3: 126 //from left 127 left = '-100%'; 128 bottom = 0; 129 break; 130 default: 131 window.console.error('error when get direction of the mouse'); 132 }; 133 134 //if we want to display content vertical middle, we need to wrap the content into a div and set the style with display table-cell 135 if (instance.settings.verticalMiddle) { 136 content = $('<div>').css({ 137 display: 'table-cell', 138 verticalAlign: 'middle' 139 }).html($element.attr(instance.settings.caption)); 140 } else { 141 content = $element.attr(instance.settings.caption); 142 } 143 $targetAParent = $element.closest('a'); 144 if ($targetAParent.length && instance.settings.withLink) { 145 var url = $targetAParent.attr('href'); 146 classes = $targetAParent.attr('class'); 147 $overlay = $('<a>', { 148 'class': 'sliphover-overlay ' + classes, 149 'href': url || '#' 150 }).css({ 151 textDecoration: 'none' 152 }); 153 } else { 154 $overlay = $('<div>', { 155 class: 'sliphover-overlay' 156 }); 157 } 158 159 $overlay.css({ 160 width: '100%', 161 height: instance.settings.height, 162 position: 'absolute', 163 left: left, 164 bottom: bottom, 165 display: instance.settings.verticalMiddle ? 'table' : 'inline', 166 textAlign: instance.settings.textAlign, 167 color: instance.settings.fontColor, 168 backgroundColor: instance.settings.backgroundColor 169 }) 170 .html(content); 171 return $overlay; 172 }, 173 slideIn: function(instance, $overlay) { 174 $overlay.stop().animate({ 175 left: 0, 176 bottom: 0 177 }, instance.settings.duration); 178 }, 179 removeOverlay: function(instance, $overlayContainer, direction) { 180 var finalState, 181 $overlay = $overlayContainer.find('.sliphover-overlay'); 182 183 switch (direction) { 184 case 0: //to top 185 finalState = { 186 bottom: '100%', 187 left: 0 188 }; 189 break; 190 case 1: //to right 191 finalState = { 192 bottom: 0, 193 left: '100%' 194 }; 195 break; 196 case 2: //to bottom 197 finalState = { 198 bottom: '-100%', 199 left: 0 200 }; 201 break; 202 case 3: //to left 203 finalState = { 204 bottom: 0, 205 left: '-100%' 206 }; 207 break; 208 default: 209 window.console.error('error when get direction of the mouse'); 210 }; 211 212 //slide out 213 $overlay.stop().animate(finalState, instance.settings.duration, function() { 214 $overlayContainer.remove(); 215 }); 216 }, 217 getDirection: function($target, event) { 218 //reference: http://stackoverflow.com/questions/3627042/jquery-animation-for-a-hover-with-mouse-direction 219 var w = $target.width(), 220 h = $target.height(), 221 x = (event.pageX - $target.offset().left - (w / 2)) * (w > h ? (h / w) : 1), 222 y = (event.pageY - $target.offset().top - (h / 2)) * (h > w ? (w / h) : 1), 223 direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 224 return direction; 225 } 226 }; 227 228 $.fn[pluginName] = function(options) { 229 this.each(function() { 230 if (!$.data(this, "plugin_" + pluginName)) { 231 $.data(this, "plugin_" + pluginName, new SlipHover(this, options)); 232 } 233 }); 234 235 // chain jQuery functions 236 return this; 237 }; 238 239})(jQuery, window, document);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.