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.全屏与非全屏切换: ...
随机推荐
- Spark kafka flume
Flume Flume 是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,通过监控整个文件目录或者某一个特定文件,用于收集数据:同时Flume也 提供数据写到各种数据接 ...
- springboot web - 启动(2) run()
接上一篇 在创建 SpringApplication 之后, 调用了 run() 方法. public ConfigurableApplicationContext run(String... arg ...
- 新建Microsoft Word文档
问题描述 L正在出题,新建了一个word文档,想不好取什么名字,身旁一人惊问:“你出的题目叫<新建Microsoft Word文档>吗?”,L大喜,一拍桌子,说:“好,就叫这个名字了.” ...
- Java(一)环境的安装与配置
一.JDK的安装 1.JDK与JRE的区别 Java开发环境,简称JDK(Java Development Kit),它是Java的核心,包括了Java编译器.Java运行环境.Java打包工具.Ja ...
- Java数三退一问题
问题描述 有100人围成一圈,顺序排号.从第1个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来的第几号的那位. 代码实现: public class Count3Quit1 { ...
- [Python]爬取首都之窗百姓信件网址id python 2020.2.13
经人提醒忘记发网址id的爬取过程了, http://www.beijing.gov.cn/hudong/hdjl/com.web.consult.consultDetail.flow?original ...
- HDU6683
题意 英文 做法 考虑公比为\(\frac{a}{b}\),满足\(a>b,(a,b)=1\) 枚举长度\(k\),设序列头为\(p\),尾为\(q\),有\(p\times \frac{a^{ ...
- BZOJ3473&&BZOJ3277串
BZOJ3473&&BZOJ3277串 题面 自己找去 HINT 对于所有串建立一个广义后缀自动机,对于每一个节点开一个set表示这个节点接受的子串在哪些串里出现过,然后在parent ...
- 最大流算法之Ford-Fulkerson算法与Edmonds–Karp算法
引子 曾经很多次看过最大流的模板,基础概念什么的也看了很多遍.也曾经用过强者同学的板子,然而却一直不会网络流.虽然曾经尝试过写,然而即使最简单的一种算法也没有写成功过,然后对着强者大神的代码一点一点的 ...
- react-React深入-一等公民-props-onChange
title: '[react]深入 - 一等公民 props & onChange' date: 2017-08-23 10:05:07 tags: react reactjs props o ...