Question

我正在使用jQuery UI。＃scene1当前正在调整大小，当我拖动边缘时效果很好。但是，当用户鼠标停在#LeftArrow上时，＃scene1需要调整大小。

我不了解resize start（）或stop（）以及如何使用鼠标事件。有人可以帮帮我吗？

$('#scene1').resizable({
maxWidth: 300,
maxHeight: 600,
minHeight: 600,
minWidth: 0,
handles: 'e',
});


#LeftArrow {
position: absolute;
background-image: url('../graphics/LeftArrow.jpg');
width: 51px;
height: 71px;
bottom: 156px;
right: 0px;
}


<div id = "codeSection"></div>

<div id = "scene1">
<div id = "LeftArrow"></div>
</div>

<div id = "scene2">
    <div id = "S1_Image"><img src = "graphics/S2_Image.jpg"></div>
    <div id = "CTAs">
        <div id="CTA1" class="transButton">Learn more</div>
        <div id="CTA2" class="transButton">Explore</div>
    </div>
</div>

Answer 1

您需要一个调用JS函数的链接来设置宽度和高度。

<style>
#LeftArrow {
position: absolute;
background-image: url('../graphics/LeftArrow.jpg');
width: 51px;
height: 71px;
bottom: 156px;
right: 0px;
}     
</style>

<script>
$('#scene1').resizable({
maxWidth: 300,
maxHeight: 600,
minHeight: 600,
minWidth: 0,
handles: 'e',
});   

function resizeLeftArrow(){
$('#LeftArrow').width(555);
$('#LeftArrow').height(555);
}     

</script>

<div id = "codeSection"></div>

<div id="scene1">
<a href="javascript:resizeLeftArrow();"><div id="LeftArrow">click me to grow bigger</div></a>
</div>

在Click和MouseDown上调整Div的大小

1 个答案: