jQuery 扩展 全屏切换
(function ($) {
//全屏切换方法
$.fn.toggleFullScreen = function (qp1, qp2) {
var fullFlag = false;
var _qp1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjkwRUFCQTVEN0VGODExRTY4QkQ2QkVENjg0NjQ1ODI5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjkwRUFCQTVFN0VGODExRTY4QkQ2QkVENjg0NjQ1ODI5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTBFQUJBNUI3RUY4MTFFNjhCRDZCRUQ2ODQ2NDU4MjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTBFQUJBNUM3RUY4MTFFNjhCRDZCRUQ2ODQ2NDU4MjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6iY1HaAAABhklEQVR42tTVzysEYRjA8XfXJImDAxelKHJzkT+ALRer/EhO0iaDFNcN0dpSDg7KgeJoazcOclAOHJWUg1Yp+dE6bKlVe9g2ZXzf9Rw2zezOaC/e+uzMPPPO+74z88yzPsuyRpVS/ahHK6pwiylVuq1hAF94wQcuDH4mEJRO++hAXpVvn8jhASGJtShWGEMaOQSgPGpHHhkk/IzaiRMM4Ryzyn0LygpNxNGmZ3jCvcwWsn6a6WJlw9J3WY5v8Kaf4RkMmfEAlmx1bMdhZeOIYQVRiV2hzml2U2bfsjkXlnOrdteWuiV9K6c28bjDRAW+wqgVbH5V4fa/B5zGsU38EEteBxzBLrI251KSe3O2V/KWI9goevWDkmfREim1IH1mimI6Lzf1zjNeJRiUjusuPr35X59pEu965xp76JIOEQ+VZlKu6cM27nQwgRSyGPtD+eqR0qdL4JEuANVolkcakEqdxGKZDAmjF4+oEbWG1LGMPkC3/AWkXaRcA5rQKOmlM+LyW4ABAGgWNeGGOO3KAAAAAElFTkSuQmCC";
var _qp2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBFNzI1QUUyN0VGOTExRTZBQjc0RTY4QzM3NDc4NkZGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBFNzI1QUUzN0VGOTExRTZBQjc0RTY4QzM3NDc4NkZGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEU3MjVBRTA3RUY5MTFFNkFCNzRFNjhDMzc0Nzg2RkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEU3MjVBRTE3RUY5MTFFNkFCNzRFNjhDMzc0Nzg2RkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6/iCRnAAABlElEQVR42syUQStEURTH7wyalAXSWzDRkChkMTtfYVaKla2JLPABiG+hZprdlAU7siQLNQulSKEkYmFqopFGY8b1P+a85nTmPlnMwqlf977/OffcM3PvPcZa+wx2gVFkQM6hz4AL4Ck9AZ5osmdrllYBj6zrhGusx4U2ZVVwypH0LCDhMusTKlkZDMnANDu2+PsgIOGK0GM8r4JB0lpN3ZLgCyyCPKiAsmk0y+McyPKaGHioeRsr2LR1u3L454X/DkSknyrMgEne6QO8iGr6HBV2iDmt3wZREAZFEsZAXAR9ghve4NiR8BRcghbQDaaF7y1EZTbTwqbJ9v8T0qHMgl5xv2gs8aFcgxO1pgck+FAioI310M8t4eYQZHnHPVz4Jd6G+dqM89jJL8a3guNXVcWcrpUHhjnHqN49CkrgFpxz9TpmiYs54nFd+o2jBVVAF8gGNIdVoW/oLqWTUdcY+GP78lSXSvlvmU5sn0+V/ot7x5uV1s5jP3elpOhWHu1QAO9+PxMcgteAUy6CEaXvUJnfAgwAoQ3O5VwgXEIAAAAASUVORK5CYII=";
_qp1 = qp1 == "" || qp1 == undefined ? _qp1 : qp1;
_qp2 = qp2 == "" || qp2 == undefined ? _qp2 : qp2;
$(this).css({ "background": "url('" + _qp1 + "') no-repeat center center", "outline": "none", "cursor": "pointer" })
$(this).click(function () {
if (fullFlag) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
fullFlag = false;
$(this).css({ "background": "url('" + _qp1 + "') no-repeat center center", "outline": "none", "cursor": "pointer" })
} else {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
fullFlag = true;
$(this).css({ "background": "url('" + _qp2 + "') no-repeat center center", "outline": "none", "cursor": "pointer" });
}
})
};
//banner图快速切换
$.fn.toggleActive = function (className) {
$(this).addClass(className).siblings().removeClass(className)
}
})(jQuery);
jQuery 扩展 全屏切换的更多相关文章
- jQuery插件开发——全屏切换插件
这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...
- CSS jQuery 图片全屏切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- jquery简单的大背景banner图片全屏切换
详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...
- jquery横向纵向鼠标滚轮全屏切换
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- 基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- HTML5实现网页的全屏切换
使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下: //进入全屏 function enterFullScreen() { v ...
- VirtualBox全屏切换
用VirtualBox的时候,如果设置为全屏,想再切换回来,没有什么菜单,只有通过键盘的快捷键来操作,才可以恢复. 我常常忘掉,所以老是得去找,以后需要记住这几个按键的快捷键. 1.全屏与非全屏切换: ...
随机推荐
- xshell远程打开Linux图形界面加速方法:
https://blog.csdn.net/zyy247796143/article/details/82143832 服务器安装: yum install Xvfb :在安装完谷歌浏览器后,安 ...
- Lucene使用IKAnalyzer分词
1.分析器 所有分析器最终继承的类都是Analyzer 1.1 默认标准分析器:StandardAnalyzer 在我们创建索引的时候,我们使用到了Index ...
- 数据库中查出来的时间多8小时&查询数据正常展示少8小时
将serverTimezone的配置改为Asia/Shanghaiurl: jdbc:mysql://127.0.0.1:3306/bfc?useUnicode=true&characterE ...
- python三器
1.1 装饰器 1.装饰器的作用 1. 装饰器作用:本质是函数(装饰其他函数)就是为其他函数添加其他功能 2. 装饰器必须准寻得原则: 1)不能修改被装饰函数的源代码 2)不能修改被装饰函数的调用方式 ...
- Java基于SSM在线学习系统设计与实现
Spring+SpringMVC+MyBatis+Bootstrap+Vue开发在线学习系统 本课题的主要内容是开发基于Java EE的在线学习平台,使用MVC经典开发模式. ...
- Fiddler抓取https方法
基本配置 菜单 -> menu -> tool -> https 勾选"捕获https连接" 勾选"捕获https流量" 勾选"检查 ...
- Django生成脚本迁移文件时,报错django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
一.本人环境:django:3.0.2, python:3.8.1, pymysql:0.9.3 二.解决步骤: 1.django目录下找到 base.py文件: 2.在base.py文件中注释以下 ...
- C#接口与抽象类学习笔记
本笔记摘抄自:https://www.cnblogs.com/solan/archive/2012/08/01/CSharp06.html,记录一下学习过程以备后续查用. 摘要: 抽象类:是一种特殊的 ...
- Docker学习笔记(2):使用Dockerfile构建镜像
Dockerfile是用来构建Docker镜像的文件,是由一系列命令和参数构成的脚本.每条指令都必须为大写字母且后面要跟随至少一个参数,每条指令都会创建一个新的镜像层,并对镜像进行提交. Docker ...
- webpack打包后不能调用,改用uglifyjs打包压缩
背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩. 项目的js中声明了一些全局变量 供其他js调用. 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将j ...