1

我正在为 Webkit 制作一个 HTML 页面，并且有一个比视口更宽的图像（2048 x 1536px）。我想让图像的右半部分作为起点出现在视口中，并允许向左滚动以查看图像的其余部分。

我在 CSS 中尝试了一些东西（浮点数，负边距偏移），但没有任何运气。

<!DOCTYPE html>
<html laneg="en">
<head>
<title>Viewport example</title>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.44, maximum-scale=1.0, target-densitydpi=device-dpi"/> 
</head>
<body>
<img src="image25.jpg" width="4800" height="2400" />
</body>
</html>

视觉表现：http: //i44.tinypic.com/351j1pw.jpg

4

5 回答 5

0

一个 jQuery 解决方案（jsFiddle）：

为图像添加 ID：

<img src="image25.jpg" id="theImage" width="4800" height="2400" />

使用scrollLeft：

$(function() {
    $('body').scrollLeft($('#theImage').width());
});

当然你可以只使用 4800 的宽度width()。但是，如果图像大小是可变的，这将更加动态。

于 2013-04-30T12:35:18.430 回答
0

您可以使用 CSS 方向将渲染从从左到右更改为从右到左。

CSS方向属性

这是一个显示这一点的 jsFiddle。此外，通过将图像包装在外部

<div>

使用溢出：隐藏，您可以限制屏幕上显示的内容。

http://jsfiddle.net/vzZgc/

于 2013-04-30T12:51:06.793 回答
0

您可以window.scroll(/* IMAGE WIDTH*/, 0)在 JavaScript 块中使用。

例如window.scroll(4800, 0)

见：http: //jsfiddle.net/bneqh/

于 2013-04-30T12:29:03.903 回答
0

默认情况下，在从左到右的世界（不是阿拉伯语）中，所有网页都从左侧开始，允许您向右滚动。

你要问的是有一个正常的网页，从左边开始，有一个滚动条，让你甚至可以向左滚动更多。

一种解决方案是（无 JS）通过 CSS 将图像设置为背景图像，将其放置在右侧，当页面增长时（视口），随着视口的增加，您将在图像的左侧显示更多内容

否则你必须使用 JavaScript

于 2013-04-30T12:29:35.743 回答
0

您可能希望强制浏览器滚动。将其水平滚动 4800 像素，以确保它在每个设备上都位于右侧。或者只使用图像的宽度而不是指定数字。

<script type="text/javascript">
    window.scrollTo(4800,0);
</script>
于 2013-04-30T12:30:36.850 回答