|
|
| Line 1: |
Line 1: |
| | {{BIT-China}} | | {{BIT-China}} |
| | <html> | | <html> |
| − | <script> | + | <script src="http://wayou.github.io/SlipHover/js/jquery.sliphover.min.js"></script> |
| − | (function($, window, document, undefined) {
| + | |
| − | | + | |
| − | // Create the defaults once
| + | |
| − | var pluginName = "sliphover",
| + | |
| − | defaults = {
| + | |
| − | target: 'img', //the element that the overlay will attach to
| + | |
| − | caption: 'title', //the caption that will display when hover
| + | |
| − | duration: 'fast', //specify how long the animation will lasts in milliseconds
| + | |
| − | fontColor: '#fff',
| + | |
| − | textAlign: 'center', //display the caption left, center or right
| + | |
| − | verticalMiddle: true, //display the caption vertical middle or not
| + | |
| − | backgroundColor: 'rgba(0,0,0,.7)', //specify the background color and opacity using rgba
| + | |
| − | backgroundColorAttr: null, //specify the attribute with background color value and opacity using rgba
| + | |
| − | reverse: false, //reverse the direction
| + | |
| − | height: '100%', //specify the height of the overlay
| + | |
| − | withLink: true //if image is wraped with a link the overlay will be clickable, set false to disable click
| + | |
| − | };
| + | |
| − | | + | |
| − | function SlipHover(element, options) {
| + | |
| − | this.element = element;
| + | |
| − | this.settings = $.extend({}, defaults, options);
| + | |
| − | this._defaults = defaults;
| + | |
| − | this._name = pluginName;
| + | |
| − | this.version = 'v2.0.5';
| + | |
| − | this.init();
| + | |
| − | }
| + | |
| − | | + | |
| − | SlipHover.prototype = {
| + | |
| − | init: function() {
| + | |
| − | | + | |
| − | //disable on touch devices
| + | |
| − | if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | | + | |
| − | var that = this,
| + | |
| − | target = this.settings.target;
| + | |
| − | | + | |
| − | //create the overlay container each time the mouse enters
| + | |
| − | $(this.element).off('mouseenter.sliphover', target).on('mouseenter.sliphover', target, function(event) {
| + | |
| − | //fix #9 https://github.com/wayou/SlipHover/issues/9
| + | |
| − | //use this instead of event.target for sometimes the event.target is not retriving the right target we want
| + | |
| − | //http://stackoverflow.com/questions/9838137/event-target-jquery-on-mousedown-up-is-not-giving-the-dom-specified-by-selecto
| + | |
| − | var $element = $(this),
| + | |
| − | $overlayContainer = that.createContainer($element);
| + | |
| − | | + | |
| − | $overlayContainer.off('mouseenter.sliphover mouseleave.sliphover').on('mouseenter.sliphover mouseleave.sliphover', function(event) {
| + | |
| − | //if (!$overlayContainer) return;
| + | |
| − | var direction = that.getDirection($(this), event);
| + | |
| − | | + | |
| − | //check if reverse option is on
| + | |
| − | direction = that.settings.reverse ? direction = (direction + 2) % 4 : direction;
| + | |
| − | | + | |
| − | if (event.type === 'mouseenter') {
| + | |
| − | //check if the previous overlay still exists before we create it
| + | |
| − | var $overlay = $overlayContainer.find('.sliphover-overlay');
| + | |
| − | if (!$overlay.length) {
| + | |
| − | $overlay = that.createOverlay(that, direction, $element);
| + | |
| − | //put the overlay into the container
| + | |
| − | $(this).html($overlay);
| + | |
| − | }
| + | |
| − | that.slideIn(that, $overlay);
| + | |
| − | } else {
| + | |
| − | //slide out based on the direction
| + | |
| − | that.removeOverlay(that, $(this), direction);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | },
| + | |
| − | createContainer: function($element) {
| + | |
| − | //get the properties of the target
| + | |
| − | var top = $element.offset().top,
| + | |
| − | left = $element.offset().left,
| + | |
| − | //border = parseFloat($element.css("border-left-width")),
| + | |
| − | width = $element.outerWidth(),
| + | |
| − | height = $element.outerHeight();
| + | |
| − | zIndex = $element.css("z-index");
| + | |
| − | var $overlayContainer = $('<div>', {
| + | |
| − | class: 'sliphover-container'
| + | |
| − | }).css({
| + | |
| − | width: width,
| + | |
| − | height: height,
| + | |
| − | position: 'absolute',
| + | |
| − | overflow: 'hidden',
| + | |
| − | top: top,
| + | |
| − | left: left,
| + | |
| − | borderRadius: $element.css('border-radius'), //in case the target has a round border, this will make the overlay more nicer
| + | |
| − | zIndex: zIndex == +zIndex ? (zIndex + 1) : 999 // if the z-index of the target is not number then use 999
| + | |
| − | });
| + | |
| − | | + | |
| − | $('body').append($overlayContainer);
| + | |
| − | | + | |
| − | return $overlayContainer;
| + | |
| − | },
| + | |
| − | createOverlay: function(instance, direction, $element) {
| + | |
| − | | + | |
| − | var bottom, left, $overlay, $overlayColor, content, $targetAParent;
| + | |
| − | | + | |
| − | switch (direction) {
| + | |
| − | case 0:
| + | |
| − | //from top
| + | |
| − | left = 0;
| + | |
| − | bottom = '100%';
| + | |
| − | break;
| + | |
| − | case 1:
| + | |
| − | //from right
| + | |
| − | left = '100%';
| + | |
| − | bottom = 0;
| + | |
| − | break;
| + | |
| − | case 2:
| + | |
| − | //from bottom
| + | |
| − | left = 0;
| + | |
| − | bottom = '-100%';
| + | |
| − | break;
| + | |
| − | case 3:
| + | |
| − | //from left
| + | |
| − | left = '-100%';
| + | |
| − | bottom = 0;
| + | |
| − | break;
| + | |
| − | default:
| + | |
| − | window.console.error('error when get direction of the mouse');
| + | |
| − | };
| + | |
| − | | + | |
| − | //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
| + | |
| − | if (instance.settings.verticalMiddle) {
| + | |
| − | content = $('<div>').css({
| + | |
| − | display: 'table-cell',
| + | |
| − | verticalAlign: 'middle'
| + | |
| − | }).html($element.attr(instance.settings.caption));
| + | |
| − | } else {
| + | |
| − | content = $element.attr(instance.settings.caption);
| + | |
| − | }
| + | |
| − | $targetAParent = $element.parent('a');
| + | |
| − | if ($targetAParent.length && instance.settings.withLink) {
| + | |
| − | var url = $targetAParent.attr('href'),
| + | |
| − | target=$targetAParent.attr('target');//fix issue#17
| + | |
| − | $overlay = $('<a>', {
| + | |
| − | class: 'sliphover-overlay',
| + | |
| − | href: url || '#',
| + | |
| − | target: target||'_self'
| + | |
| − | }).css({
| + | |
| − | textDecoration: 'none'
| + | |
| − | });
| + | |
| − | } else {
| + | |
| − | $overlay = $('<div>', {
| + | |
| − | class: 'sliphover-overlay'
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | $overlayColor = instance.settings.backgroundColorAttr ?
| + | |
| − | $element.attr(instance.settings.backgroundColorAttr) : instance.settings.backgroundColor;
| + | |
| − | | + | |
| − | $overlay.css({
| + | |
| − | width: '100%',
| + | |
| − | height: instance.settings.height,
| + | |
| − | position: 'absolute',
| + | |
| − | left: left,
| + | |
| − | bottom: bottom,
| + | |
| − | display: instance.settings.verticalMiddle ? 'table' : 'inline',
| + | |
| − | textAlign: instance.settings.textAlign,
| + | |
| − | color: instance.settings.fontColor,
| + | |
| − | backgroundColor: $overlayColor
| + | |
| − | })
| + | |
| − | .html(content);
| + | |
| − | return $overlay;
| + | |
| − | },
| + | |
| − | slideIn: function(instance, $overlay) {
| + | |
| − | $overlay.stop().animate({
| + | |
| − | left: 0,
| + | |
| − | bottom: 0
| + | |
| − | }, instance.settings.duration);
| + | |
| − | },
| + | |
| − | removeOverlay: function(instance, $overlayContainer, direction) {
| + | |
| − | var finalState,
| + | |
| − | $overlay = $overlayContainer.find('.sliphover-overlay');
| + | |
| − | | + | |
| − | switch (direction) {
| + | |
| − | case 0: //to top
| + | |
| − | finalState = {
| + | |
| − | bottom: '100%',
| + | |
| − | left: 0
| + | |
| − | };
| + | |
| − | break;
| + | |
| − | case 1: //to right
| + | |
| − | finalState = {
| + | |
| − | bottom: 0,
| + | |
| − | left: '100%'
| + | |
| − | };
| + | |
| − | break;
| + | |
| − | case 2: //to bottom
| + | |
| − | finalState = {
| + | |
| − | bottom: '-100%',
| + | |
| − | left: 0
| + | |
| − | };
| + | |
| − | break;
| + | |
| − | case 3: //to left
| + | |
| − | finalState = {
| + | |
| − | bottom: 0,
| + | |
| − | left: '-100%'
| + | |
| − | };
| + | |
| − | break;
| + | |
| − | default:
| + | |
| − | window.console.error('error when get direction of the mouse');
| + | |
| − | };
| + | |
| − | | + | |
| − | //slide out
| + | |
| − | $overlay.stop().animate(finalState, instance.settings.duration, function() {
| + | |
| − | $overlayContainer.remove();
| + | |
| − | });
| + | |
| − | },
| + | |
| − | getDirection: function($target, event) {
| + | |
| − | //reference: http://stackoverflow.com/questions/3627042/jquery-animation-for-a-hover-with-mouse-direction
| + | |
| − | var w = $target.width(),
| + | |
| − | h = $target.height(),
| + | |
| − | x = (event.pageX - $target.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
| + | |
| − | y = (event.pageY - $target.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
| + | |
| − | direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
| + | |
| − | return direction;
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | $.fn[pluginName] = function(options) {
| + | |
| − | this.each(function() {
| + | |
| − | if (!$.data(this, "plugin_" + pluginName)) {
| + | |
| − | $.data(this, "plugin_" + pluginName, new SlipHover(this, options));
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | // chain jQuery functions
| + | |
| − | return this;
| + | |
| − | };
| + | |
| − | | + | |
| − | })(jQuery, window, document);
| + | |
| − | | + | |
| − | </script> | + | |
| | | | |
| | <div id="div_c"> | | <div id="div_c"> |
| Line 248: |
Line 13: |
| | | | |
| | </div> | | </div> |
| − | | + | <script>$("#div_c").sliphover();</script> |
| | </div></div><!----> | | </div></div><!----> |
| | <html> | | <html> |
