如何在放大和缩小时保持div大小不变?

时间:2013-06-26 15:48:57

标签: javascript jquery html css

this website上查看此滑块,然后按 CTRL + + CTRL + - < / strong> (放大,缩小)你会理解我的意思。

如何做到这一点,在缩放页面时保持滑块及其内容的大小相同。

我猜它使用任何jQuery / JavaScript脚本,我不确定。谢谢。

2 个答案:

答案 0 :(得分:0)

您只需使用事件处理程序重新计算滑块尺寸,如下所示:

$(document).on('keydown', function(e){
    if(e.ctrlKey) {

        if(e.which === 187) {
            // zoom-in, +
        }

        if(e.which === 189) {
            // zoom-out, -
        }

    }
});

<强>更新

我注意到您可以简单地使用resize - 事件来检查窗口大小是否已更改:

$(window).on('resize', function(){
    alert(true)
});

http://fiddle.jshell.net/aZagW/1/

<强> UPDATE2

您使用的滚动条有自己的refresh - 方法:

  

根据新状态刷新轮播。通过在windows resize事件上调用此方法,可以使轮播响应。

https://github.com/richardscarrott/jquery-ui-carousel#refresh-rs-carouselcarouselrefresh

答案 1 :(得分:0)

你可以尝试这样的事情

window.onresize = function()
{
    var elementWidth = window.innerWidth
    var element = document.getElementById('element')
    element.style.width = parseInt(elementWidth)/2 // for example if you want it always be half of page 
}