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.全屏与非全屏切换: ...
随机推荐
- PhpStorm+Xdebug配置单步调试PHP
(一)php安装xdebug扩展,PHPStorm+XDebug单步调试 (二)PHPStorm配置XDebug (三)PHPStorm使用XDebug调试 (四)PhpStorm+Xdebug配置单 ...
- 关于新版vue-cli安装json-server在build文件里没生成出dev-server文件
今天在安装json-server时遇到一个问题,build文件里并没有生成dev-server.js文件, 开始是怀疑配置有问题,或者安装不正确,然后重新安装了两三次,还是这样,郁闷.. 通过查询资料 ...
- Docker容器Centos不能使用systemctl命令问题
注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/bug-dock ...
- html点击圆形扩散显示界面特效
开场白 效果 用到的核心代码 思考 探索 源码 兼容性问题 开场白 经常看到某些app有点击扩散的特效,有些当做扩散显示界面,有些扩散改变主题颜色,想在网页上实现一下,所以就有了这个. 效果 不想听逼 ...
- vue 学习3
在 2.5.0 及以上版本中,如果你使用了单文件组件 $children,$slots,$attrs .... $attrs 可以透传props 注意.模板标签上有:属性="a", ...
- scrapy框架综合运用 爬取天气预报 + 定时任务
爬取目标网站: http://www.weather.com.cn/ 具体区域天气地址: http://www.weather.com.cn/weather1d/101280601.shtm(深圳) ...
- npm常用模块之mkdirp使用
更多npm常用模块使用请访问:npm常用模块汇总 mkdirp这是一款在node.js中像mkdir -p一样递归创建目录及其子目录. 更多使用文档请点击访问mkdirp工具官网. 安装 一键安装不多 ...
- Agri-Net POJ - 1258 prim
#include<iostream> #include<cstdio> #include<cstring> using namespace std; ; #defi ...
- python3练习100题——045
题目:统计 1 到 100 之和. sum(range(1,101)) 题目太容易了,我都不想用迭代浪费时间. 觉得这100道题难度设计越来越不合理.
- ECMAScript基本语法——⑦js特殊的语法
定义方法 无法弹出因为是局部变量 可以弹出因为是全局变量 这样写可读性比上面的高