`
jjfat
  • 浏览: 285820 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

阅读更多

日期:2012/02/06  来源:GBin1.com

 

分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen

在线演示  在线下载

今天介绍一款帮助网站提高用户体验的jQuery插件 - jQuery fullscreen,它能够帮助网站实现针对阅读内容的全屏显示功能。

这个插件基于Full Screen API.,目前有半数的浏览器支持这个API。

  • 支持 Firefox 10, Safari and Chrome;
  • 使用requestFullScreen() 方法触发;
  • 可以支持任何元素的全屏显示,而不仅仅是页面
  • 由于安全原因,只支持用户触发全屏
  • 也由于安全原因,输入被严格控制,除了方向键其它按键不能使用
  • API还不完善,只能使用浏览器指定方法(前缀为moz and webkit)

jQuery代码

jQuery(document).ready(function($){
    if($.support.fullscreen){
        $('#fullscreen').click(function(e){
            $('#content').fullScreen();
            e.preventDefault();
        });
    }
});    
 

 

分享到:
评论

相关推荐

    jQuery-FullScreen-master 全屏操作

    jQuery-FullScreen-master 是一个基于jQuery的插件,专门用于实现这种全屏功能。在这个项目中,我们将探讨jQuery全屏插件的工作原理、如何使用以及它的核心功能。 jQuery库是一个轻量级的JavaScript库,简化了DOM...

    前端项目-jquery-fullscreen-plugin.zip

    前端项目-jquery-fullscreen-plugin,这个jquery插件提供了一个简单易用的机制来控制现代浏览器的新全屏模式。目前只有更新的基于webkit的浏览器(如chrome)和firefox提供了这个新的全屏功能。

    jQuery Textarea全屏插件Textarea Fullscreen

    总结来说,“jQuery Textarea Fullscreen”插件是一个高效、易用的工具,它可以帮助开发者快速实现textarea的全屏功能,提高网站的用户体验。通过深入理解这个插件的工作原理和使用方法,开发者可以更好地满足用户在...

    jQuery全屏插件Textarea Fullscreen

    Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js和textareafullscreen.css <script type="text/javascript"> $(function(){ $('#demo'...

    jquery-fullscreen-plugin:此jQuery插件提供了一种易于使用的机制来控制现代浏览器的新全屏模式

    jQuery全屏插件描述这个jQuery插件提供了一种易于使用的机制来控制现代浏览器的新全屏模式。 当前,只有较新的基于Webkit的浏览器(如Chrome和Safari),Firefox和IE11 +才提供此新的全屏功能。用法进入全屏模式您...

    jQuery全屏插件TextareaFullscreen.zip

    总的来说,jQuery全屏插件TextareaFullscreen提供了一种简单且有效的方法,帮助开发者快速实现textarea的全屏功能,提升用户体验。其背后的JavaScript和jQuery技术原理值得开发者深入学习和理解,以便在实际工作中...

    Jquery实现图片全屏显示插件

    结合以上知识点,我们可以构建一个基本的 jQuery 图片全屏显示插件。这个插件不仅可以让用户点击图片进入全屏模式,还可以在全屏状态下通过再次点击或点击关闭按钮退出全屏。在实际应用中,还需要考虑更多细节,如...

    完美背景全屏自适应Jquery插件+DEMO

    如果你是一个webdeveloper或设计师,我确信你已经遇到问题的人要有“全屏”的内容或背景图像,伸展在最理想的方式,用户的屏幕上。 最近我发现,很多人都要求全屏背景,视频和其他类型的东西。所以为了防止自己重复...

    一款功能强大的Jquery弹窗插件最大化全屏显示弹出层

    本主题聚焦于一个特定的jQuery插件——“功能强大的Jquery弹窗插件”,该插件允许用户实现最大化全屏显示的弹出层效果。在网页交互设计中,弹窗通常用于提示信息、展示内容或进行用户交互,而全屏弹窗则能提供更沉浸...

    jquery tn3lite幻灯片插件支持全屏预览的图片相册代码

    总的来说,jQuery TN3Lite是一个强大且易用的幻灯片插件,通过其全屏预览功能,能够为用户提供更佳的图片浏览体验。通过熟练掌握其使用方法和配置选项,开发者可以轻松构建出满足需求的图片展示效果。

    前端项目-lg-fullscreen.zip

    总的来说,"前端项目-lg-fullscreen.zip"是一个便于前端开发者实现全屏画廊功能的资源包,通过LightGallery插件,可以轻松创建出高质量的、响应式的多媒体展示页面,提升网站的互动性和用户体验。

    jquery付费3D高端插件分享

    标题中的“jquery付费3D高端插件分享”指的是一个基于jQuery的高级3D效果插件,这通常是指用于网页交互和动态展示的JavaScript库。jQuery是JavaScript的一个流行框架,简化了DOM操作、事件处理、动画制作和Ajax交互...

    基于GSAP的响应式全屏背景图片jQuery幻灯片插件

    本篇文章将深入探讨“基于GSAP的响应式全屏背景图片jQuery幻灯片插件”的相关知识点,帮助你理解和掌握如何创建适应性强、视觉效果出色的全屏背景图片幻灯片。 首先,GSAP(GreenSock Animation Platform)是一个...

    jquery点击小图弹出大图全屏幻灯片插件源码.zip

    "jQuery点击小图弹出大图全屏幻灯片插件源码.zip"正是这样一个工具,它利用jQuery库的强大功能,为网站提供了一种优雅的方式来展示图片,特别是在产品展示或摄影站点中尤为常见。下面,我们将深入探讨这个插件的工作...

    jQuery全屏幻灯片插件finger

    jQuery Finger插件正是为实现这一功能而生,它是一个轻量级且易于使用的库,旨在帮助开发者创建具有左右全屏切换效果的幻灯片。下面我们将深入探讨jQuery Finger插件的关键特性、工作原理以及如何在项目中集成和...

    JS实现全屏显示

    下面是一个简单的示例,演示如何使用JavaScript来控制全屏状态: ```javascript // 打开全屏 function fullScreen() { const el = document.documentElement; if (el.requestFullscreen) { el....

    jquery实现图片点击全屏放大展示.zip

    首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在这个项目中,jQuery的主要作用是监听用户的点击事件,触发全屏展示,并处理全屏下的图片切换和关闭。 1. **图片...

    jQuery可关闭全屏广告代码

    【jQuery可关闭全屏广告代码】是一个用于创建全屏背景广告的解决方案,它允许用户自定义关闭按钮,提供了一种互动式的用户体验。这个代码利用了流行的JavaScript库jQuery,以其高效和简洁的API来处理DOM操作、事件...

    js控制div全屏

    3. **编写jQuery插件**:编写一个jQuery插件来处理全屏操作。这个插件可能包括进入全屏、退出全屏以及响应窗口大小改变的逻辑。以下是一个基本的示例: ```javascript (function($) { $.fn.fullscreen = function...

Global site tag (gtag.js) - Google Analytics