Impossible de changer ce javascript pour lire moins de hauteur que de largeur sur mousemove

Question

J'essaie donc de configurer ce jQuery CSS dock menu et vous pouvez entrer à proximité dans la configuration. La proximité détermine le moment où le zoom sera déclenché, mais vous ne pouvez vous placer que sur une distance identique pour la hauteur et la largeur. Comment puis-je changer ce code pour permettre d'entrer une seule valeur pour la hauteur et une seule valeur pour la largeur -OU- Comment puis-je avoir juste une valeur mais la valeur verticale coupée en deux? soit on travaille ... voici le morceau de code qui, à mon avis, doit être changé ... si vous avez besoin de tout cela, faites-le moi savoir et je posterai le reste

jQuery(document).bind('mousemove', function(e) {
  var pointer = jQuery.iUtil.getPointer(e);
  var toAdd = 0;

  if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center') 
    var posx = pointer.x - el.fisheyeCfg.pos.x 
               - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())
               / 2 - el.fisheyeCfg.itemWidth / 2;
  else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right') 
    var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth 
               + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
  else 
    var posx = pointer.x - el.fisheyeCfg.pos.x;

  var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight / 2, 2);

  el.fisheyeCfg.items.each(function(nr) {
    distance = Math.sqrt(Math.pow(posx - nr * el.fisheyeCfg.itemWidth, 2) + posy);
    distance -= el.fisheyeCfg.itemWidth / 2;
    distance = distance < 0 ? 0 : distance;
    distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;
    distance = el.fisheyeCfg.proximity - distance;
    extraWidth = el.fisheyeCfg.maxWidth * distance / el.fisheyeCfg.proximity;
    this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
    this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
    toAdd += extraWidth;
  });
  jQuery.iFisheye.positionContainer(el, toAdd);
});

Des idées?

Merci,
Matt

Answer 1

Je me suis amusé avec le script et j'ai fini par le modifier un peu plus que prévu.

Vous devez maintenant appeler le script en utilisant quelques nouveaux paramètres: itemHeight , proximitX et proximitY

.

$(document).ready(function() {
 $('#fisheye').Fisheye({
  maxWidth: 90,
  items: 'a',
  itemsText: 'span',
  container: '.fisheyeContainter',
  itemWidth: 40,
  itemHeight: 40,
  proximityX: 90,
  proximityY: 10,
  halign : 'center'
 })
});

Je ne l'ai pas minifié, mais voici le plugin modifié dans son intégralité:

/**
 * Interface Elements for jQuery
 * Fisheye menu
 * 
 * http://interface.eyecon.ro
 * 
 * Copyright (c) 2006 Stefan Petre
 * Dual licensed under the MIT (MIT-LICENSE.txt) 
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 */

/**
 * Build a Fisheye menu from a list of links
 *
 * @name Fisheye
 * @description Build a Fisheye menu from a list of links
 * @param Hash hash A hash of parameters
 * @option String items items selection
 * @option String container container element
 * @option Integer itemWidth the minimum width for each item
 * @option Integer maxWidth the maximum width for each item
 * @option String itemsText selection of element that contains the text for each item
 * @option Integer proximity the distance from element that make item to interact
 * @option String valign vertical alignment
 * @option String halign horizontal alignment
 *
 * @type jQuery
 * @cat Plugins/Interface
 * @author Stefan Petre
 */
jQuery.iFisheye = {

 build : function(options)
 {

  return this.each(
   function()
   {
    var el = this;
    el.fisheyeCfg = {
     items : jQuery(options.items, this),
     container: jQuery(options.container, this),
     pos : jQuery.iUtil.getPosition(this),
     itemWidth: options.itemWidth,
     itemHeight: options.itemHeight,
     itemsText: options.itemsText,
     proximityX: options.proximityX,
     proximityY: options.proximityY,
     valign: options.valign,
     halign: options.halign,
     maxWidth : options.maxWidth
    };
    jQuery.iFisheye.positionContainer(el, 0);
    jQuery(window).bind(
     'resize',
     function()
     {
      el.fisheyeCfg.pos = jQuery.iUtil.getPosition(el);
      jQuery.iFisheye.positionContainer(el, 0);
      jQuery.iFisheye.positionItems(el);
     }
    );
    jQuery.iFisheye.positionItems(el);
    el.fisheyeCfg.items
     .bind(
      'mouseover',
      function()
      {
       jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block';
      }
     )
     .bind(
      'mouseout',
      function()
      {
       jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none';
      }
     );
    jQuery(document).bind(
     'mousemove',
     function(e)
     {
      var pointer = jQuery.iUtil.getPointer(e);
      var toAdd = 0;
      if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')
       var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;
      else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')
       var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
      else 
       var posx = pointer.x - el.fisheyeCfg.pos.x;
      var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight + el.fisheyeCfg.itemHeight,2);
      el.fisheyeCfg.items.each(
       function(nr)
       {
        distanceX = Math.sqrt(
         Math.pow(posx - nr*el.fisheyeCfg.itemWidth, 2)
        );
        distanceY = Math.sqrt(posy) - el.fisheyeCfg.itemHeight;
        distanceX -= el.fisheyeCfg.itemWidth/2;
        distanceX = distanceX < 0 ? 0 : distanceX;
        distanceX = distanceX > el.fisheyeCfg.proximityX ? el.fisheyeCfg.proximityX : distanceX;
        distanceX = el.fisheyeCfg.proximityX - distanceX;
        distanceY = distanceY > el.fisheyeCfg.proximityY ? el.fisheyeCfg.proximityY : distanceY;
        distanceY = el.fisheyeCfg.proximityY - distanceY;
        extraWidth = el.fisheyeCfg.maxWidth/4 * (distanceX*distanceY)/(el.fisheyeCfg.proximityX*el.fisheyeCfg.proximityY); // divided by 4 to smooth the sizing transition
        extraWidth = (extraWidth > el.fisheyeCfg.maxWidth) ? el.fisheyeCfg.maxWidth : extraWidth;
        this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
        this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
        toAdd += extraWidth;
       }
      );
      jQuery.iFisheye.positionContainer(el, toAdd);
     }
    );
   }
  )
 },

 positionContainer : function(el, toAdd)
 {
  if (el.fisheyeCfg.halign)
   if (el.fisheyeCfg.halign == 'center')
    el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - toAdd/2 + 'px';
   else if (el.fisheyeCfg.halign == 'left')
    el.fisheyeCfg.container.get(0).style.left =  - toAdd/el.fisheyeCfg.items.size() + 'px';
   else if (el.fisheyeCfg.halign == 'right')
    el.fisheyeCfg.container.get(0).style.left =  (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) - toAdd/2 + 'px';
  el.fisheyeCfg.container.get(0).style.width = el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size() + toAdd + 'px';
 },

 positionItems : function(el)
 {
  el.fisheyeCfg.items.each(
   function(nr)
   {
    this.style.width = el.fisheyeCfg.itemWidth + 'px';
    this.style.left = el.fisheyeCfg.itemWidth * nr + 'px';
   }
  );
 }
};

jQuery.fn.Fisheye = jQuery.iFisheye.build;