[英]Changing Image on Orientation Change
So Im designing this application for iPad using phoneGap/Cordova and Jquery mobile. 因此,Im使用phoneGap / Cordova和Jquery mobile为iPad设计了此应用程序。
after researching how i could change an image on orientation change and browsing through the epic resources that is Stack Overflow. 在研究了如何改变方向后更改图像并浏览了Stack Overflow等史诗资源之后。 I implemented this code.
我实现了这段代码。
// The event for orientation change
var onChanged = function () {
// The orientation
var orientation = window.orientation,
// If landscape, then use "land" otherwise use "port"
image = orientation == 90 || orientation == -90 ? "landscape" : "portrait";
// Insert the image
$('#introimg').html('<img src="images/appimages/' + image + '-intro-page.png">');
};
// Bind the orientation change event and bind onLoad
$(window).bind(orientationEvent, onChanged).bind('load', onChanged);
I am trying to change the image for an intro page. 我正在尝试更改介绍页面的图像。 The html i Use is:
我使用的html是:
<div data-role="page" id="intro">
<div data-role="content" class="mycontent" data-theme="a">
<div id="introimg">
<img src="images/appimages/portrait-intro-page.png" alt="" width="768" height="1004" id="imglayer1" />
<br />
<p id="imglayer2"><a href="#help" data-role="button" data-inline="true" data-theme="a">Start designing</a></p>
</div>
</div>
</div>
Can anyone say what im doing wrong, its probably something stupid but i can't see it. 谁能说我做错了什么,这可能是愚蠢的,但我看不到。 Any help would be greatly appreciated.
任何帮助将不胜感激。
You can use classes for this: 您可以为此使用类:
var onChanged = function () {
// The orientation
var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
// Insert the image class
$("introimg").removeClass("portrait").removeClass("landscape").addClass(orientation);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.