全屏插件和jQuery元素大小调整插件

WEB前端 waitig 725℃ 百度已收录 0评论

1 screenfull.js

通常浏览器都有提示用户按F11,这样会使浏览器全屏。相比于键盘,鼠标似乎更有效率和更符合我们的习惯。所以,今天介绍的screenfull.js插件解决了这个问题。该插件不仅对浏览器,而且对单个元素也可以进行全屏操作。

screenfull.js是对跨浏览器使用JavaScript全屏API进行简单的封装,它可以让你把网页或任何元素进入全屏。你也不必自己实现来平滑不同浏览器之间的差异,因为screenfull.js已帮你实现。

  • 项目主页: https://github.com/sindresorhus/screenfull.js
  • Bootstrap CDN: http://cdn.bootcss.com/screenfull.js/2.0.0/screenfull.js
// 实例代码
// 利用按钮,对整个页面进行全屏或退出操作
$("#button").click(function(){
    if(screenfull.enabled){
        // 仅仅只进行全屏而不退出全屏可以调用
        // screenfull.request() 方法。
        screenfull.toggle();
    }else {
        // Ignore or do something else
    }
});
// 对单个元素进行全屏操作
// 注意 screenfull.js是用原生的js写的
// 所以每个函数输入的参数也必须是js对象
// 可以利用jQuery中数组下标来获取对应的js对象
$("#div_button").click(function(){
    if(screenfull.enabled){
        screenfull.toggle($("#div")[0]);
    }else {
        // Ignore or do something else
    }
});

2 jquery.ba-resize.js

jquery的.resize()只对窗口和框架有效。在IE和Opera浏览器中,只要窗口边框被拖动,就触发该事件,在Mozilla浏览器中,resize 事件只是在停止改变窗口大小时才会触发。为了解决其局限性和兼容不容的浏览器,jquery.ba-resize.js插件则弥补了jQuery.resize()方法的不足。

  • 项目主页: http://benalman.com/projects/jquery-resize-plugin/
  • Bootstrap CDN: http://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.js
// 监听窗口大小调整事件,每次窗口改变大小就触发该事件
        $(window).resize(function(){
            var elem = $(this);
            // 更新窗口宽度和高度
            // 可以替换这段代码,做一些有用的事情
            $('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );
        });

        //监听div尺寸调整事件
        $('textarea').resize(function () {
            var elem = $(this);
            $(this).val('window width: ' + elem.width() + ', height: ' + elem.height())
        }).resize()    //加不加.resize()是有区别的,加上后在页面初始化时就可以触发事件


本文由【waitig】发表在等英博客
本文固定链接:全屏插件和jQuery元素大小调整插件
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)