مقياس وتكبير الصورة

Question

لقد رأيت هذا السؤال ووجدته مفيدًا، لكنني حاولت القيام بالمزيد باستخدام الكود لتطبيق أزرار التكبير/التصغير ولا يبدو أنني أجعله يعمل بشكل صحيح.أنا جديد على جافا سكريبت وjquery وأواجه مشكلة في فهم كيفية تطبيق الكلمة الأساسية "هذا".

$('#plus').click(
function( event ){
    var scale = 150/100;
    var pos = $('#Container img').offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $('#Container img').parent().get(0);

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);

$('#minus').click(
function( event ){
    var scale = 100/150;
    var pos = $('#Container img').offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $('#Container img').parent().get(0);

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);

انا صنعت com.jsfiddle لعرض الكود الخاص بي.

Answer 1

this يشير إلى العنصر الذي تم النقر عليه (في الواقع، من المفترض أن تستخدمه $(this) في jQuery)، لأن الوظيفة التي يتم استدعاؤها بعد النقر تحصل على هذا النطاق.لذلك في المثال الخاص بك، this يشير إما إلى زر علامة الزائد أو زر الطرح، وبالتالي فإنك تقوم بالقياس من الناحية الفنية هُم العرض/الارتفاع وتطبيق العرض/الارتفاع الناتج على الصورة.

شيء شائع لتجنب الاضطرار إلى تصحيح ما this تمثيل هو إسنادها إلى متغير في أعلى الدالة، على سبيل المثال:

var self = this;

أو

var $myClickedButton = this;

انتبه أيضًا إلى التصميم:

• element.width يشير إلى سمة عرض العنصر (مثل <img width="300" />, ، على غرار jQuery $(element).attr('width'))، لكن
• element.style.width يشير إلى عرض CSS الخاص به (مثل <img style="width: 300px;" />, ، أو <img class="myClassWithDenotedWidth" />, ، على غرار jQuery $(element).css('width')).يحتوي الأخير أيضًا على وحدة، لذا يتعين عليك تحليلها للحصول على القيمة الرقمية فقط.

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

    var $image = $('#Container img');
    var container = $image.parent().get(0);

    $('#Container img').css({
        width: Math.round(parseInt($image.css('width'), 10) * scale), 
        height: Math.round(parseInt($image.css('height'), 10) * scale)
    });

شاهده هنا: http://jsfiddle.net/shomz/4A9Gt/4/ (أضيف أيضًا انتقال CSS لجعل التكبير/التصغير أقل تقلّبًا)