这个主要是实现手机页面相册横屏时能单独作为幻灯片播放，前提一定要让手机的横屏功能开启才可以。主要是通过iframe调用不同的引用页面实现，下面附上具体代码，可以尝试实现。
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>横竖屏</title>
<script src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var hei=$(window).height();
$("iframe").height(hei);
function orient() {
//判断是否为竖屏
if (window.orientation == 0 || window.orientation == 180) {
//alert("竖屏");
$("body").attr("class", "portrait");
orientation ="portrait";
$("#ifm").attr("src","Carousel.html");
return false;
}
//判断是否为横屏
else if (window.orientation == 90 || window.orientation == -90) {
//alert("横屏");
$("body").attr("class", "landscape");
orientation = "landscape";
$("#ifm").attr("src","Carousel1.html");
return false;
}
}
//orientationchange手机横竖屏出发事件
$(window).bind('orientationchange', function(e){
orient();
});
})
</script>
</head>
<body>
<iframe src="Carousel.html" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" style="width:100%"> </iframe>
</body>
</html>
相关推荐
前不久，做了一个H5项目，需要在横竖屏变化时，做一些处理。毫无疑问，需要使用orientationchange来监听横竖屏的变化。 方案一： // 监听 orientation changes window.addEventListener("orientationchange", ...
orientationchange-fix是一个基于CSS3@media特性实现对原生orientationchange修复的实用库，它让orientation detection更加可靠，更加easy。
下面是相关JavaScript的实现代码： (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
//判断手机横竖屏状态： function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(竖屏状态！) } if(window.orientation==90||window.orientation==-90){ alert(横屏状态！...
（2）orientationchange 是一个event，在设备旋转时，会触发此事件，如同PC上使用的resize事件。 这两个搭配起来使用，很容易就能获得设备的横竖屏状态，代码如下： (function(){ var init = function(){
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 根据设备的比例调整初始font-...
jquery mobile 针对移动端设备的事件... orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数， 该参数有两种返回值：portrait(纵向)landscar
当设备的方向改变时， orientationchange事件被触发。 – 这个定义忽略了在window.orientation属性改变之后，但在 UI 中反映方向之前触发事件。 检查元素的尺寸（例如window.innerWidth或window.innerHeight ）给...
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * ...
查了不少资料，最后结论如下： 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break;...
如果您不想在这种情况下进行任何不必要的计算，则可以使用orientationchange事件。 与这个问题orientationchange但是事件是，在很多情况下（尤其是在Android），它触发的方向已经改变了。 因此，您的函数所依赖的...
前言 这篇文章主要给大家讲解了rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起 微信小程序官方文档 >web app变革之rem >rpx单位官方文档 ... 'orientationchange' : 'resize',
在javascript写下如下几行：... resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (clientWidth === undefined) return;
var supportsOrientationChange = 'onorientationchange' in window ? 'orientationchange' : 'resize'; var timeoutId;
本文讲解rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起： 微信小程序官方文档 ... resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = funct
侦听视口更改的选项-在resize和orientationchange更改事件上绑定函数-例如matchMedia.addListener 编写简单，字符少 局限性： 仅允许像素单位 用法： 只需在代码中包含库[removed][removed] if ( mtchD ( 'min-w
1.rem.js内容 !... o = "orientationchange" in n ? "orientationchange" : "resize", a = function() { var n = t.clientWidth || 320; n > 720 && (n = 720); t.style.f
触发orientationchange事件后，它会将您向上/向下滚动到该元素的顶部。 它需要 jQuery，并且已经验证至少可以追溯到 1.10.2（wootheme 的画布使用的版本）。 我已经在运行 iOS 7 的 iPod touch 上对其进行了测试。...
安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader... resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var c