Question

我的页面上有进度条。它有效，但如果我调整窗口大小，我就会遇到问题width - 它不会改变。

HTML：

<h4 class="progress-title">Title <span class="pull-right">80%</span>/h4>
<div class="progressBar prog-bar1"><div></div></div>

javascript代码

   function progress(percent, $element) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 5000).html(percent + "% ");
    }

    try {
        progress(80, $('.prog-bar1'));

    } catch(err) {

    }

如何在调整窗口大小时调用函数？

Answer 1

使用window resize() jQuery方法。

Answer 2

您可以将resize事件绑定到window对象：

$(function() {
   $(window).resize(function() {
       function progress(percent, $element) {
            var progressBarWidth = percent * $element.width() / 100;
            $element.find('div').animate({ width: progressBarWidth }, 5000).html(percent + "% ");
        }

        try {
            progress(80, $('.prog-bar1'));

        } catch(err) {

        }
   }).trigger('resize');
});

将处理程序绑定到resize事件后触发resize事件将确保代码在页面加载时运行。

窗口调整大小时调用函数

2 个答案: