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.全屏与非全屏切换: ...
随机推荐
- Visual Studio 2017中使用gulp编译sass/scss
在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...
- TChart-数据编辑(TChartListBox,TeeCommander)
先上图 功能代码: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contr ...
- webdriver中的定位\模拟\及实例
Selenium webdriver 下载 pip install selenium pip install -i https://pypi.doubanio.com/simple/ selenium ...
- Saltshaker 开源的基于Saltstack的Web 配管工具,欢迎使用
Saltshaker是基于saltstack开发的以Web方式进行配置管理的运维工具,简化了saltstack的日常使用,丰富了saltstack的功能,支持多Master的管理. 已经在GitHub ...
- P5163 WD与地图 [整体二分,强连通分量,线段树合并]
首先不用说,倒着操作.整体二分来做强连通分量,然后线段树合并,这题就做完了. // powered by c++11 // by Isaunoya #include <bits/stdc++.h ...
- openssl 生成免费证书
原文链接:https://www.cnblogs.com/tugenhua0707/p/10927722.html 一:什么是openssl? 它的作用是?应用场景是什么? 即百度百科说:openss ...
- react-React深入-一等公民-props-onChange
title: '[react]深入 - 一等公民 props & onChange' date: 2017-08-23 10:05:07 tags: react reactjs props o ...
- Javaweb版四则运算
显示出题界面shu01.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- Python-Django学习笔记(三)-Model模型的编写以及Oracle数据库的配置
Django使用的 MTV 设计模式(Models.Templates.Views) 因此本节将围绕这三部分并按照这个顺序来创建第一个页面 模型层models.py 模型是数据唯一而且准确的信息来源. ...
- linux多线程编程的应用场景