更改图像的设备方向jquery移动

所以我有一个任务做一个移动设计网站，我必须改变图像，每次我倾斜设备。更改图像的设备方向jquery移动

指令

在HTML文档中创建4层，按照上述的实物模型，使用提供给您的图像。这是一个手机网页。我们提供了纵向和横向取向的图片资源。根据用户的设备方向显示正确的图像。这个页面的目的是允许用户通过倾斜设备在层之间导航。例如：在BLUE页面上将您的设备向左倾斜将您带到GREEN页面，并将其倾斜至右边，您将进入YELLOW页面。在层之间转换时应该也会有淡化效果。

所以，我在想这样的事情，但我的代码并没有真正的工作。请检查下面的jsfiddle示例，谢谢。

HTML代码

<div data-role="page"> 
    <div data-role="header"> 
    <h1>The orientationchange Event</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    </div> 

    <div data-role="footer"> 
    <h1>Footer Text</h1> 
    </div> 
</div>

Link

来源

2017-01-12 user7409024

如果你正在使用jQuery调整图像大小，请尝试使用CSS媒体查询更快速，稳定的工艺来调整其大小，使用这样的CSS：

@media screen and (orientation:portrait) { /*CSS for portrait*/ }

和

@media screen and (orientation:landscape) { /*CSS for landscape*/ }

不要忘了在放置css文件的链接标记上使用media =“screen”属性，否则它将不起作用。或者，你可以在百分比或像素（在固定宽度的情况下）和高度设置为自动，像这样的最大宽度80％的图像提供最大宽度的图像。高度：自动;在屏幕大小调整或方向更改时避免图像拉伸。

来源

2017-01-12 10:29:58 Abi

谢谢你的回答，我正在考虑做同样的事情，但纠正我，如果我错了，我想我只能为每个方向选项（肖像，风景）1 img和在我的情况下，我需要他们在每个方向（左，右，直）都改变了，这就是为什么我有点困惑，并想使用jQuery的移动定位功能。 – user7409024

嗯，这不是那么容易的。各种设备之间存在很多不一致。您可能需要切换到更好的方法。在不重新发明轮子的情况下，已经有一些用于倾斜和运动检测的优秀库。

只是作为一个例子：在Full-Tilt被定义如下方向：

SCREEN_ROTATION_0  = 0 
SCREEN_ROTATION_90  = M_PI_2 
SCREEN_ROTATION_180  = M_PI 
SCREEN_ROTATION_270  = M_2_PI/3 
SCREEN_ROTATION_MINUS_90 = - M_PI_2

你可以得到的角度，然后更改相应的页面。要测试compass示例，您需要一个真实的设备。

来源

2017-01-12 18:58:28 deblocker

更改图像的设备方向jquery移动

回答

相关问题