宁皓网用到的几个 Javascript 配方

根据页面窗口自动缩放的背景图片

在宁皓网首页的展示区域，有一个大背景图片，这个背景图片会根据页面窗口的宽度自动缩放。这里用到是 jQuery 的 Anystretch 插件。下载这个插件并把它加载到页面中，同时你的页面中还需要使用到 jQuery。

jQuery Anystretch：
https://github.com/danmillar/jquery-anystretch

调用的方法：
$('#showcase').anystretch("files/images/show-02.jpg");

解释：
找到页面中带有 #showcase 这个 id 的元素。然后用 Anystretch 为这个元素添加一个可以自动缩放的背景图片，图片的位置在 files/images/show-02.jpg。

修正 IOS 设备的缩放错误

在使用 iPad 浏览网页时，从垂直状态转到水平状态时候页面的显示比例会有点问题，下面这小段 Javascript 可以解决这个问题。

/* Orientation Scale Bug Fix for iOS
from: http://adactio.com/journal/4470/
-------------------------------------------------------------- */
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
};

固定的页脚

如果你的页面的主体内容很少，那么页脚部分的下面会留出一大片空白，如果你想让页脚永远在浏览窗口的最底部，可以使用下面这段 Javasciprt 代码。

       pushtobottom();
        $(window).scroll(pushtobottom).resize(pushtobottom);
        function pushtobottom() {
            var docHeight = $(document.body).height() - $("#push-to-bottom").height();
            if (docHeight < $(window).height()) {
                var diff = $(window).height() - docHeight;
                if (!$("#push-to-bottom").length > 0) {
                    $("#bottom").before('');
                }
                $("#push-to-bottom").height(diff);
            }
        }

Tip #bootom是你想要固定显示在页面窗口底部的元素上的 ID。

判断是否为 iPad

if((navigator.userAgent.match(/iPad/i)))
{$('body').addClass('ipad')};

判断一下用户使用的上网设备是否为 iPad ，如果是，那么在页面的 <body> 标签中添加一个.ipad 类。这样我们可以利用这个 iPad 类重新为 iPad 定义一些样式。

宁皓网的视频页面使用了这个小技巧，因为我想让视频的播放器在 iPad 的水平状态下时小一些，这样用户不用滚动屏幕就可以显示出播放器下面的向上和向下的控制按钮。

二维码地址

宁皓网的课程与视频页面的右下角会有一个二维码，这个二维码里包含的就是当前页面的地址信息。比如，你正在用电脑浏览这些网页，突然又想在你的平板或者手机上浏览，你可以用手机或平板上的二维码扫描软件扫一下页面上出现的二维码，这样可以直接打开这个页面。

var currentURL = window.location.hostname + window.location.pathname;
var qrimgURL = "http://chart.googleapis.com/chart?cht=qr&chl=http://" + currentURL + "&chs=120x120";
var qrimg = ("<img class='img-rounded' src='" + qrimgURL + "' style='float:left'> ");
$(".qrimg").append(qrimg);

解释：第一行代码可以获得当前页面的地址，第二行使用了 Google Chart API，生成包含当前页面地址内容的二维码，二维码图片的大小是120 x 120 像素。第三行代码就把生成的二维码图片的地址用一个<img>标签表示出来。第四行代码可以把生成的二维码图片放在页面中带有.qrimg类的元素中显示出来。

工作