`

js实现全屏和缩放

js 
阅读更多
/**
 * @description 简单的浏览器检查结果。 * `webkit`
 *              webkit版本号,如果浏览器为非webkit内核,此属性为`undefined`。 * `chrome`
 *              chrome浏览器版本号,如果浏览器为chrome,此属性为`undefined`。 * `ie`
 *              ie浏览器版本号,如果浏览器为非ie,此属性为`undefined`。 * `firefox`
 *              firefox浏览器版本号,如果浏览器为非firefox,此属性为`undefined`。 * `safari`
 *              safari浏览器版本号,如果浏览器为非safari,此属性为`undefined`。 * `opera`
 *              opera浏览器版本号,如果浏览器为非opera,此属性为`undefined`。
 * 
 * @property {Object} [browser]
 */
var browser = function() {
	var ua = navigator.userAgent;
	var ret = {}, webkit = ua.match(/WebKit\/([\d.]+)/), chrome = ua
			.match(/Chrome\/([\d.]+)/)
			|| ua.match(/CriOS\/([\d.]+)/),

	ie = ua.match(/MSIE\s([\d\.]+)/) || ua.match(/Edge\/([\d.]+)/)
			|| ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i), firefox = ua
			.match(/Firefox\/([\d.]+)/), safari = ua.match(/Safari\/([\d.]+)/), opera = ua
			.match(/OPR\/([\d.]+)/);

	webkit && (ret.webkit = parseFloat(webkit[1]));
	chrome && (ret.chrome = parseFloat(chrome[1]));
	ie && (ret.ie = parseFloat(ie[1]));
	firefox && (ret.firefox = parseFloat(firefox[1]));
	safari && (ret.safari = parseFloat(safari[1]));
	opera && (ret.opera = parseFloat(opera[1]));

	return ret;
};
function requestFullscreen() {
	var docElm = document.documentElement;
	if (browser().ie) {
		docElm.msRequestFullscreen();
		return false;
	}

	if (browser().chrome) {
		docElm.webkitRequestFullScreen();
		return false;
	}
	if (browser().firefox) {
		docElm.mozRequestFullScreen();
		return false;
	}
}
function exitFullscreen() {
	if (browser().ie) {
		document.msExitFullscreen();
		return false;
	}

	if (browser().chrome) {
		document.webkitCancelFullScreen();
		return false;
	}
	if (browser().firefox) {
		document.mozCancelFullScreen();
		return false;
	}
}
0
0
分享到:
评论

相关推荐

    全屏缩放广告代码.rar

    在这个名为"全屏缩放广告代码.rar"的压缩包中,可能包含了实现全屏广告展示所需的所有文件,例如HTML结构文件、CSS样式表和JavaScript脚本文件等。 全屏广告通常在页面加载完成后自动弹出,占据整个浏览器窗口,以...

    jQuery图片全屏缩放和平移预览代码

    这个项目就是基于jQuery实现的一个图片全屏缩放和平移预览功能。下面我们将深入探讨其中涉及的技术点。 首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个项目...

    Electron 全屏打包 禁止缩放 拖拽

    在 Electron 开发中,创建全屏应用并禁用用户缩放和拖拽是常见的需求,特别是在构建桌面应用程序时。 Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,它允许开发者利用 Node.js 的强大功能...

    jQuery和CSS3全屏响应式缩放切换幻灯片特效

    本篇文章将深入解析一款基于jQuery和CSS3的全屏响应式缩放切换幻灯片特效,帮助开发者理解和实现此类功能。 首先,让我们了解jQuery库。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画...

    viewer.js图片缩放

    "viewer.js图片缩放"是一种基于jQuery的轻量级插件,它专为网页中的图片查看和交互设计,提供了丰富的功能,如...结合viewer.css和viewer.js,可以快速实现图片缩放、滑动等功能,提升用户在网页浏览过程中的视觉体验。

    JS全屏伸缩广告代码

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,包括交互式用户界面、动态内容以及广告展示。全屏伸缩广告代码是利用JS实现的一种广告展示技术,它能够让广告根据浏览器窗口大小进行...

    HTML5全屏响应式缩放切换幻灯片.zip

    此外,`transform`属性用于改变元素的形状、大小和位置,如在这里实现的平滑缩放和移动效果。 4. **JavaScript/jQuery**:JavaScript是实现动态交互效果的核心,而jQuery是一个流行的JavaScript库,简化了DOM操作、...

    jQuery全屏图片叠加缩放切换点击查看大图效果代码

    在实现全屏图片叠加缩放效果时,jQuery的灵活性和强大的功能为我们提供了便利。 一、全屏图片展示 全屏图片展示是指将网页背景或主要内容设置为一张占据整个浏览器窗口的大图。这通常通过CSS实现,可以使用`...

    图片点击可全屏、缩小预览

    开发者可以通过解压这些文件来学习如何实现类似的功能,包括图片加载逻辑、事件处理函数、全屏状态的管理和缩放动画效果等。 综上所述,"图片点击可全屏、缩小预览"这一特性是提升用户体验的关键,涉及到前端交互...

    jquery自动缩放渐变全屏背景图片代码下载.zip

    在这个“jquery自动缩放渐变全屏背景图片代码下载.zip”压缩包中,我们关注的是一个利用jQuery实现的特殊效果,即全屏背景图片的自动缩放和渐变效果。这个功能通常用于提升网站的视觉吸引力,尤其是在设计现代、简洁...

    jQuery图片全屏缩放和平移预览代码.zip

    jQuery图片全屏缩放和平移预览代码,图片全屏预览模式:点击图片可以切换到全屏查看图片的模式,全屏模式下可以缩放和平移图片。 js代码 [removed][removed] [removed][removed] [removed] $(function () { ...

    react-基于viewerjs实现的react图片预览组件支持的旋转缩放和缩放等操作

    本项目基于Viewer.js库实现了一个React组件,提供了图片的旋转、缩放和缩放等高级操作,大大增强了用户体验。 Viewer.js是一个轻量级且强大的图片查看器插件,它支持多种自定义配置,包括手势控制、全屏、旋转、...

    js春节全屏动画效果、全屏动画掉落效果

    内容概要:该资源是纯前端js,通过js、html、css实现全屏动画效果,动画效果内包含掉落、缩放、渐变、淡入淡出等过渡、动画效果;巧用字符字体等,减少网络资源加载。该项目可玩性高,支持自定义掉落符号! 如何...

    lightbox插件图片全屏缩放下载功能代码

    这款特定的Lightbox插件提供了全屏缩放和下载功能,增强了用户体验,尤其适用于图像展示丰富的网站。 在网页设计中,Lightbox插件通常使用JavaScript和CSS实现。JavaScript负责处理用户的交互,如点击图片后的弹出...

    jQuery全屏背景图片无限循环缩放动画特效

    总结起来,"jQuery全屏背景图片无限循环缩放动画特效"通过巧妙地结合jQuery库和CSS技术,实现了动态背景图片的无缝切换与缩放动画,提升了网页的视觉魅力。对于希望为网站增添动态元素的开发者来说,这是一个值得...

    全屏图片轮播带缩放图

    4. **实现技术**:实现全屏图片轮播带缩放图,通常会使用HTML、CSS和JavaScript。HTML用于构建基本的结构,CSS负责样式布局和响应式设计,JavaScript则处理交互逻辑,如自动轮播、导航控制以及缩放功能。此外,还...

    jQuery全屏背景图片极致缩放切换显示特效代码下载.rar

    本篇文章将深入探讨如何使用jQuery实现全屏背景图片的极致缩放和切换显示特效。 首先,我们需要了解jQuery的基本用法。jQuery是一个JavaScript库,它简化了DOM操作、事件处理和动画制作等任务。要使用jQuery,你...

    HTML5 视频(videos)缩放JavaScript插件

    在实际使用中,开发者需要按照readme文件的指导将插件引入项目,设置合适的断点和视频容器样式,然后通过JavaScript调用插件的方法来初始化和控制视频缩放。同时,考虑到性能优化,可能还需要关注插件是否提供了防止...

    支持全屏缩放下载功能lightbox插件.zip

    "支持全屏缩放下载功能Lightbox插件.zip" 提供的正是这样一个增强用户体验的功能性组件。 该插件的核心特性包括: 1. **全屏模式**:用户可以将当前显示的内容扩展至全屏,从而更好地欣赏图片或视频,提高视觉体验...

    基于jq-viewer的pc和移动端的图片缩放,托动、旋转等

    同时,图片在缩放和平移过程中使用CSS3的变换来提高性能。 ### 7. 兼容性与移动端优化 jq-viewer不仅支持PC端,还针对触屏设备进行了优化,适配各种屏幕尺寸和手势操作。其基于触控事件的处理机制确保了在手机和...

Global site tag (gtag.js) - Google Analytics