1

我正在制作一个投资组合网站，其中包含一个简单的下拉列表和一个 div 中的大 GIF 图像（10659px × 6850px）。如我所愿，当您从列表中进行选择时，您会使用一个在 onChange 中激活的简单 javascript 跳转到页面上的某些锚点。

的HTML：

<div id="background">
<img src="img/background.gif" width="10659" /></div>

<select id="dropdownlist" onChange="jumpScroll(this.value);">
<option  alt="selected works" value="0">Selected works:</option>
<option  alt="work 1" value="1">Work 1</option>
<option  alt="work 2" value="2">Work 2</option>
<option  alt="work 3" value="3">Work 3</option>
</select>

的JavaScript：

function jumpScroll(inobj) {


switch (inobj) {

case "1":
    window.scroll(1938,2740);
    break;

case "2":
    window.scroll(7753,5483);
    break;

case "3":
    window.scroll(0,1369);
    break;

    default:
    break;
}
}

我的问题：我想让网站响应，以便图像在每个屏幕上具有相同的比例。例如，图像的宽度将变为 550% 而不是 10659px。但是，当然，设置的锚点开始移动并且不匹配。有没有办法解决这个问题？也许使用使用相对值而不是固定像素的javascript或jQuery？还是把图片剪下来做各种ID来参考？任何提示或答案将不胜感激！

4

2 回答 2

1

好的，一位朋友帮助了我，这是我想要的 jQuery。我不再使用一张背景图片，而是使用多个 div，并且 jQuery 滚动到他们的 ID。

$(document).ready(function(){
$("#dropdownlist").on('change',function(){
    var project = "#" + $(this).val();
    $.scrollTo($(project), 1000);
});
});

原则：

<div id="workone">Work 1 content</div>
<div id="worktwo">Work 2 content</div>
<div id="workthree">Work 3 content</div>

<select id="dropdownlist">
<option value="workone">Work 1</option>
<option value="worktwo">Work 2</option>
<option value="workthree">Work 3</option>
</select>

链接到滚动到 jQuery 下载：http ://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js

感谢您的建议！

于 2014-04-06T21:13:20.590 回答
1

我看到你使用并推荐我的插件。我想指出您提供的链接指向旧版本的插件。很久以前，我从 Google Code 搬到了 Github。您（和其他人）应该从发布页面获取最新版本：

https://github.com/flesler/jquery.scrollTo/releases

干杯

于 2014-04-07T03:35:59.990 回答