javascript 级联广告缩放

Posted 2021-05-04

var $content = $('.content');
var $fullWidth = 1340;
var $mediumWidth = 960;
var $mobileWidth = 740;

function scaleContent () {
    var adScale = ad.get('flowlaneScale');
    if (ad.el.width() <= ($fullWidth * adScale) && ad.el.width() > ($mediumWidth * adScale)) {
        // between fullWidth and mediumWidth
        $content.css({
            'transform': 'scale(' + ((ad.el.width() - (0 * adScale)) / ($fullWidth * adScale)) + ')'
        });
        console.log('btw fullWidth and mediumWidth: adScale =', adScale);
    } else if (ad.el.width() <= ($mediumWidth * adScale) && ad.el.width() > ($mobileWidth * adScale)) {
        // between mediumWidth and mobileWidth
        $content.css({
            'transform': 'scale(' + ((ad.el.width() - (0 * adScale)) / ($mediumWidth * adScale)) + ')'
        });
        console.log('btw mediumWidth and mobileWidth: adScale =', adScale);
    } else if (ad.el.width() <= ($mobileWidth * adScale)) {
        // mobileWidth or smaller
        $content.css({
            'transform': 'scale(' + ((ad.el.width() - (0 * adScale)) / ($mobileWidth * adScale)) + ')'
        });
        console.log('mobileWidth or smaller: adScale =', adScale);
    } else {
        // greater than fullWidth
        $content.css({
            'transform': 'scale(1)'
        });
        console.log('greater than fullWidth: adScale =', adScale);
    }
}
ad.on('resized', function () {
    scaleContent();
});
component.on('showStart', scaleContent);