منع انحسار عند استخدام تأثير JQUERY UI "الحجم"

https://stackoverflow.com/questions/1671633

13-09-2019
|

سؤال

لدي قائمة من الصور مثل هذا:

<ul class='blah'>
  <li><img src='...' /></li>
  <li><img src='...' /></li>
  <li><img src='...' /></li>
  <li><img src='...' /></li>
</ul>

ولدي تم تصميمه لعرضه كقائمة أفقية دون نقاط رصاصة. كيندا من مثل ما تراه على جيثب للأتباع (انظر http://github.com/chrislloyd.). أنا أستخدم jQuery and jQuery ui لجعل هذه الصور أكبر عندما يحوم المستخدم فأرهم فوقها. إليك الرمز الذي حصلت عليه حتى الآن:

$(".blah img").hover(
  function() {
    $(this).effect("size",
      { to: { width: 64, height: 64 },
        origin: ['top','center'], scale: 'content' });
  },
  function() {
    $(this).effect("size",
      { to: { width: 32, height: 32 }, scale: 'content' });
  });

يعمل هذا بشكل جيد أثناء قيامه بالتحفير، ولكن بمجرد أن تصل الصورة إلى الحد الأقصى لحجمها، فإن الصور الأخرى التي انحسر (الخروج من الطريق). أي أفكار كيفية القيام بذلك دون إغراق أي شيء؟

حاولت الاختلافات في الموقف: المطلق؛ "،" الوضع: قريب "، إلخ. على الصور والحاوية ( <ul>) لكنه لم يحدث حقا أي فرق.

المحلول

يمكنك تجربة شيء مثل:

var pos = $(this).position();
$(this).css({ position: "absolute",
              top: pos.top, left: pos.left, zindex:10 });

سيؤدي ذلك إلى الحفاظ على الصورة من دفع الآخرين ولكنه نوع لديه مشكلة عكسية من "امتصاص" الآخرين منذ أن يتم وضعها بعيدا عن الطريق.

هناك جيدة جدا مثال هنا من استخدام JQuery لإنجاز تأثير مماثل.

يستخدم هذا المثال عناصر القائمة إلى نوع حجز مساحة الصور. نحن نطفو البنود القائمة اليسار والفضاء لهم من خلال وضعهم في وضعهم "قريب" ومنحهم حجم صريح. ثم يتم وضع الصور "مطلق" داخل عنصر القائمة. الآن عندما نستخدم JQuery لإعادة استخدام صورنا، لا تتفق الصور الأخرى نظرا لأن عنصر القائمة يتصرف كصائب نائب.

يستخدم المثال أيضا تحريك بدلا من تأثير تأثير قليل من النظافة.

أتمنى أن يساعدك هذا. حظا طيبا وفقك الله.

نصائح أخرى

ها هي محاولتي. قمت بتعيين العناصر القائمة المراد وضعها قريبا لعقد الصور المحيطة تماما. يبدو أن هذا يعمل كما حددته. المشكلة الوحيدة هي عند الانزلاق جميعها بسرعة، كلها تحريكها. أود أن أفترض أنك تريد إضافة شيء ما إلى هناك لجعله يتغير المرء فقط في وقت واحد.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        li { position:relative; height:40px; width:40px; float:left; list-style:none; }
        li img { position:absolute; top:0; left:0; height:32px; width:32px; border:1px solid #666; background:#eee; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".blah img").hover(
              function() {
                $(this).css("z-index", "2");
                $(this).animate({
                  "height": "65px", "width": "65px", "top": "-16px", "left":"-16px"
                }, "slow");
              },
              function() {
                 var that = this;
                $(this).animate({
                  "height": "32px", "width": "32px", "top": "0", "left":"0"
                }, "slow", "swing", function() { $(that).css("z-index", "1"); });

              });
        });
    </script>
</head>

<body>
    <ul class='blah'>
      <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
      <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
      <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
      <li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
    </ul>

</body>
</html>

إذا كنت تستخدم وظيفة "التحريك" من jQuery بدلا من "تأثير"، فإنه يعمل بشكل رائع (لا ينضج). جربت الشفرة التالية في Firefox 3، Chrome و IE 8 وفي جميع الحالات لا شيء ينسض. إليك الوظيفة:

    $(".blah img").hover(
      function() {
        $(this).animate( {'width': 64, 'height': 64 });
      },
      function() {
        $(this).animate( {'width': 32, 'height': 32 });
      });

وهنا الصفحة الكاملة التي اعتدت عليها اختبار الوظيفة:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script src="../jquery.js" type="text/javascript"></script>
    <script type="text/javascript" >
            $(document).ready( function() {
            $(".blah img").hover(
              function() {
                $(this).animate( {'width': 64, 'height': 64 });
              },
              function() {
                $(this).animate( {'width': 32, 'height': 32 });
              });
            });
    </script>
    <style type="text/css" rel="stylesheet">
      ul li { 
        float: right;
        list-style: none;
      }
    </style>
    </head>
    <body>
    <ul class='blah'>
      <li><img src='../i32.jpg' /></li>
      <li><img src='../i32.jpg' /></li>
      <li><img src='../i32.jpg' /></li>
      <li><img src='../i32.jpg' /></li>
    </ul>
    </body>
    </html>

عادة ما تكون الإجابة السهلة للعثور على مسافة مسج موجودة يقوم بها بالفعل ما تريد. هناك الكثير منهم هناك، وحتى إذا لم يكن أحد الكمال، فيمكنك التكيف أو التعلم منه للحصول على النتيجة المرجوة.

للقيام بذلك بنفسك، أقترح وجود نسختين من الصورة: واحد مضبوطا مع القائمة، وآخر على أعلى الأكبر. وبهذه الطريقة لا يعتمد تخطيط القائمة على الصورة التكبير على الإطلاق.

رمز غير مختبر، مجرد التفكير:

//  on page load, process selected images
$(function () {
  $('img.hoverme').each(function () {
    var img = $(this);
    var alt = $("<img src='" + img.attr('src') + "'/>");
    img.after(alt);
    alt.hide();

    img.hover(function () {
      var position = img.position();
      alt.css({ 
        position: "absolute",
        top: position.top,
        left: position.left,
        width: 32,
        height: 32
      }).animate({
        top: position.top - 16,
        left: postion.left - 16,
        width: 64,
        height: 64
      });
    }, function () { });

    alt.hover(function () { }, function () {
      var position = img.position();
      alt.animate({
        top: position.top,
        left: position.left,
        width: 32,
        height: 32
      }, function () {
        alt.hide();
      });  // alt.animate
    });  //  alt.hover

  });  //  each
});  // $(

عندما يذهب الماوس فوق الصورة الأصغر، يتم إنشاء أكبر واحد يحوم فوقه، وتوسع على الفور في المكان. عندما يترك الماوس الصورة الأكبر، يتقلص ثم يختفي.

تحتاج إلى وظيفة تقوم بما يلي:

يحوم المستخدم على الصورة
استدعاءات الدالة لاستنساخ ($ (this) .clone ().
هل الرسوم المتحركة الخاصة بك على الصورة المستنسخة
على تحريك، عكس الرسوم المتحركة، ثم قم بإزالة العنصر المستنسخ تماما. (.إزالة())

بسيطة جدا. ستظل العناصر الأخرى غير مسجل وعدم التحرك.

حصلت على نتيجة أفضل قليلا عن طريق تحديد الأصل إلى أعلى اليسار بدلا من أعلى المركز.

ولكن خلاف ذلك هو نفسه تقريبا. إليك شيء آخر للعمل عليه:

<html><head><title>HELL NO WE WON'T REFLOW</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script>
jQuery(function($) {
  $('.blah img').each(function(){
    var p = $(this).position();
    $(this).css({top:p.top,left:p.left});
  });
  $('.blah img').each(function(){
    //$(this).css({position:'absolute'});
  });
  $(".blah img").hover(
  function() {
    $(this).effect("size",
      { to: { width: 375, height: 91 },
        origin: ['top','left'], scale: 'content' });
  },
  function() {
    $(this).effect("size",
      { to: { width: 250, height: 61 }, scale: 'content' });
  });
});
</script>
</head>
<body>
<ul class="blah">
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
</ul>
</body>
</html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow