全屏切换效果 -- 慕课网学习

最新推荐文章于 2022-06-29 11:58:03 发布
最新推荐文章于 2022-06-29 11:58:03 发布
阅读量512 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muzi187/article/details/83783364
版权

https://www.imooc.com/learn/374

如何实现jQuery插件框架

1、闭包的作用

     

 

 

$是形参，实参是jQuery对象

 

 

 

 

2、开发方式有两种：

3、链式调用，jQuery最大的优势就是链式调用

4、单例模式

采用动态的开发方式，就需要创建实例，可以使用单例模式

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="jquery-3.2.1.min.js"></script>
	<script src="pageSwitch.js"></script>
	<title>Document</title>
</head>
<body>
<div id="container" data-PageSwitch>
	<div class="sections">
		<div id="section0" class="section active">
			<div class="intro">
				<h1 class="title">switchPage</h1>
				<p>Create Beautiful Fullscreen Scrolling Websites</p>
			</div>
		</div>
		<div id="section1" class="section">
			<div class="intro">
				<h1 class="title">Example</h1>
				<p>HTML markup example to define 4 sections</p>
				<img src="images/example.png"/>
			</div>
		</div>
		<div id="section2" class="section">
			<div class="intro">
				<h1 class="title">Example</h1>
				<p>The plug-in configuration parameters</p>
				<img src="images/example2.png"/>
			</div>
		</div>
		<div id="section3" class="section">
			<div class="intro">
				<h1 class="title">THE END</h1>
				<p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
			</div>
		</div>
	</div>
</div>
<script>
//应用
$("#container").PageSwitch({
	index:6,
	easing:"linear",
	duration:800,
	loop:true,
	direction:"herizontal"
});
</script>
</body>
</html>

*{ padding:0; margin:0;}
html,body{ height:100%; overflow:hidden; font-family:Arial,"Microsoft YaHei",sans-serif;}
#container,.sections,.section{ height:100%; position:relative;}
#section0,#section1,#section2,#section3{ background-color:#000; background-size:cover; background-position:50% 50%; }
#section0{ background-image:url(images/1.jpg); color:#FFF; text-shadow:1px 1px 1px #333;}
#section1{ background-image:url(images/2.jpg); color:#FFF; text-shadow:1px 1px 1px #333;}
#section2{ background-image:url(images/3.jpg); color:#FFF; text-shadow:1px 1px 1px #666;}
#section3{ background-image:url(images/4.jpg); color:#008283; text-shadow:1px 1px 1px #fff;}
#section0 p{ color:#F1FF00;}
#section3 p{ color:#00A3AF;}
.left{ float:left; }
h1{ font-size:6em; font-weight:normal;}
p{ font-size:2em; margin:0.5em 0 2em 0;}
.intro{ position:absolute; top:50%; width:100%; -webkit-transform:translateY(-50%); transform:translateY(-50%); text-align:center;}
.pages{ position:fixed; list-style:none;}
.vertical.pages{ right:10px; top:50%;}
.horizontal.pages{ bottom:10px; left:50%;}
.pages li{ width:8px; height:8px; border-radius:50%; background:#FFF; margin:10px 5px; cursor:pointer;}
.horizontal.pages li{ display:inline-block; vertical-align:middle;}
.pages li.active{ width: 14px; height: 14px; border: 2px solid #FFFE00; background: none; margin-left: 0; }
#section0 .title{
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
	animation: sectitle0 1s ease-in-out 100ms forwards;
}
#section0 p{
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-animation: sec0 1s ease-in-out 100ms forwards;
	animation: sec0 1s ease-in-out 100ms forwards;
}
@-webkit-keyframes sectitle0{
	0%{
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	100%{
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes sectitle0{
	0%{
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	100%{
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@-webkit-keyframes sec0{
	0%{
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	100%{
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes sec0{
	0%{
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	100%{
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
(function($){
	//获取浏览器的前缀
	var _prefix=function(temp){
		var aPrefix=["webkit","Moz","o","ms"];
		var props="";
		for(var i in aPrefix){
			props=aPrefix[i]+"Transition";
			if(temp.style[props]!==undefined){
				return "-"+aPrefix[i].toLowerCase()+"-";
			}
		}
		return false;
	}(document.createElement(PageSwitch))
	var PageSwitch=(function(){
		function PageSwitch(element,options){
			this.settings=$.extend(true,$.fn.PageSwitch.defaults,options||{});
			this.element=element;
			this.init();
		}
		PageSwitch.prototype={
			//说明：初始化插件
			//实现：初始化dom结构。布局分页及绑定事件
			init:function(){
				var me=this;
				me.selectors=me.settings.selectors;
				me.sections=me.element.find(me.selectors.sections);
				me.section=me.sections.find(me.selectors.section);

				me.direction=me.settings.direction=="vertical"?true:false;
				me.pagesCount=me.pagesCount();
				me.index=(me.settings.index>=0 && me.settings.index<me.pagesCount)?me.settings.index:0;

				me.canScroll=true;

				if(!me.direction || me.index){
					me._initLayout();
				}
				if(me.settings.pagination){
					me._initPaging();
				}

				me._initEvent();
			},
			//说明：获取滑动页面数量
			pagesCount:function(){
				return this.section.length;
			},
			//说明：获取活动的宽度（横屏滑动）或高度（竖屏滑动）
			switchLength:function(){
				return this.direction?this.element.height():this.element.width();
			},
			//上一页
			prev:function(){
				var me=this;
				if(me.index>0){
					me.index--;
				}else if(me.settings.loop){
					me.index=me.pagesCount-1;
				}
				me._scrollPage();
			},
			//下一页
			next:function(){
				var me=this;
				if(me.index<me.pagesCount){
					me.index++;
				}else if(me.settings.loop){
					me.index=0;
				}
				me._scrollPage();
			},
			//说明：针对横屏情况进行页面布局
			_initLayout:function(){
				var me = this;
				if(!me.direction){
					var width = (me.pagesCount * 100) + "%",
						cellWidth = (100 / me.pagesCount).toFixed(2) + "%";
					me.sections.width(width);
					me.section.width(cellWidth).css("float", "left");
				}
				if(me.index){
					me._scrollPage(true);
				}
			},
			//实现分页的dom结构及css样式
			_initPaging:function(){
				var me=this;
				var pagesClass=me.selectors.page.substring(1);
				me.activeClass=me.selectors.active.substring(1);
				var pageHtml="<ul class="+pagesClass+">";
				for(var i=0;i<me.pagesCount;i++){
					pageHtml+="<li></li>";
				}
				pageHtml+="</ul>";
				me.element.append(pageHtml);

				var pages=me.element.find(me.selectors.page);
				me.pageItem=pages.find("li");
				console.log(me.pageItem);
				me.pageItem.eq(me.index).addClass(me.activeClass);

				if(me.direction){
					pages.addClass("vertical");
				}else{
					pages.addClass("horizontal");
				}
			},
			//初始化插件时间
			_initEvent:function(){
				var me=this;
				me.element.on("click",me.selectors.page+" li",function(){
					me.index=$(this).index();
					me._scrollPage();
				});

				me.element.on("mousewheel DOMMouseScroll",function(e){
					e.preventDefault();
					if(me.canScroll){
						var delta=e.originalEvent.wheelDelta || -e.originalEvent.detail;//火狐滑动与其他浏览器正负相反
						if(delta>0 && (me.index && !me.settings.loop || me.settings.loop)){ //鼠标向上滑动
							me.prev(); //上一页
						}else if(delta<0 && (me.index<(me.pagesCount-1) && !me.settings.loop || me.settings.loop)){//向下滑动
							me.next(); //下一页
						}
					}
				});

				if (me.settings.keyBoard){
					$(window).on("keydown",function(e){
						var keyCode=e.keyCode;
						if(keyCode==37 || keyCode==38){
							me.prev();
						}else if(keyCode==39 || keyCode==40){
							me.next();
						}
					});
				}

				$(window).resize(function(){
					var currentLength=me.switchLength();
					var offset=me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;
					if (Math.abs(offset)>currentLength/2 && me.index<(me.pagesCount-1)){
						me.index++;
					}
					if (me.index){
						me._scrollPage();
					}
				});
				
				//动画结束
				me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(){
					me.canScroll=true;
					if(me.settings.callback && $.type(me.settings.callback)=="function"){
						me.settings.callback();
					}
				})
			},
			//滑动动画
			_scrollPage:function(init){
				var me=this;
				var dest=me.section.eq(me.index).position();
				if(!dest) return;

				me.canScroll=false;

				if(_prefix){
					me.sections.css(_prefix+"transition","all "+me.settings.duration+"ms "+me.settings.easing);
					var translate=me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";
					me.sections.css(_prefix+"transform",translate);
				}else{
					var animateCss=me.direction ? {top:-dest.top} : {left:-dest.left};
					me.sections.animate(animateCss,me.settings.duration,function(){
						me.canScroll=true;
						if(me.settings.callback && $.type(me.settings.callback)=="function"){
							me.settings.callback();
						}
					});
				}
				if(me.settings.pagination){
					me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
				}
			}
			
		};
		return PageSwitch;
	})();
	$.fn.PageSwitch=function(options){
		return this.each(function(){
			var me=$(this);
			var instance=me.data("PageSwitch");
			if(!instance){
				instance=new PageSwitch(me,options);
				me.data("PageSwitch",instance);
			}
			if($.type(options)==="string") return instance[options]();
		});
	}
	$.fn.PageSwitch.defaults={
		selectors:{
			sections:".sections",
			section:".section",
			page:".pages",
			active:".active",
		},
		index:0,         //页面开始的索引
		easing:"ease",    //动画效果
		duration:500,     //动画执行时间
		loop:false,       //false图片不循环，true图片循环
		pagination:true,    //是否进行分页
		keyBoard:true,      //是否支持键盘事件,true支持
		direction:"vertical", //horizontal
		callback:""         //回调函数
	}

	$(function(){
		$("[data-PageSwitch]").PageSwitch();
	})

})(jQuery);

 

muzi187
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3全屏切换效果
01-20
div+css实现全屏切换的效果，不会js的童鞋们看过来啦！
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
10-18
在本文中，我们将探讨如何使用`vue-video-player`这个Vue.js组件来实现自定义全屏切换效果。`vue-video-player`是一个基于`video.js`的视频播放器，它提供了丰富的API和自定义选项，使得在Vue项目中集成视频播放变得...
全屏切换效果
java_zhaoyanli的专栏
09-21 512
预备： HTML语言 css样式-class、选择器、背景 css动画 JavaScript基本语法，闭包，单例模式 jQuery基础功能 $(select), .data(),.animate(),事件等 1，可以使用sublime  text插件，安装 Emmet插件 ！->Tab   就可生成HTML模板 【闭包】 （function($){ }）(jque
实现全屏切换效果
KeeMew的博客
03-22 442
using UnityEngine; using System.Collections; public class DoFullScreen : MonoBehaviour { private bool isFullScreen; // Use this for initialization void Start () { isFullScreen = f
jQuery全屏背景图片切换效果
ICode联盟
06-29 277
下载地址全屏背景图片切换效果，使用jQuery使用的轮播特效。dd:
移动端开发网页注意
boylufeng的专栏
03-16 410
CSS实现全屏切换效果的示例代码
09-27
本篇文章主要介绍了CSS实现全屏切换效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js全屏自适应百叶窗切换效果.zip
07-11
【全屏自适应百叶窗切换效果】是一种流行的网页动态展示技术，主要应用于网页轮播图、产品展示等场景。这种效果通过模拟百叶窗的开合动作，为用户带来新颖且富有视觉冲击力的浏览体验。在JavaScript的世界里，实现...
jQuery全屏页面滚动导航切换效果
06-05
**jQuery全屏页面滚动导航切换效果详解** 在网页设计中，全屏页面滚动导航是一种流行的交互方式，它能提供沉浸式的用户体验，使用户在浏览网站时感到更加舒适和流畅。结合jQuery实现的导航切换效果，可以提升网站的...
jQuery全屏页面滚动导航切换效果.zip
07-11
js代码 [removed][removed] [removed][removed] [removed] $(function() { ... $('.containter').animate({'top': -100*nowpage '%'}, 500);... $('.page').eq(nowpage).addClass('current').siblings().removeClass...
js全屏切换效果demo效果示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-03 359
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta
简单全屏切换
yeyechen的博客
05-23 357
1.理清思路。2.关键在于获取浏览器当前的宽度与高度。3.采用screen.availWidth和screen.availHeight。html:&lt;div class="dm-box"&gt; &lt;div class="danmu"&gt; &lt;video class="video"&gt; &lt;source src="www.jq22.commi4.w
全屏切换
dreams_tomorrow的博客
03-09 223
    CSS3 动画     html, body {    height: 100%;    overflow: hidden;   }   body {    margin: 0;    padding: 0;    position: relative;   }   ul {    padding: 0;    margin: 0;    l
网页的全屏切换
xif3681的博客
07-30 423
// 进入全屏 enterFullScreen() { const de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFull...
一个全屏页面切换实例
马优晨
01-15 1592
这里写了一个全屏切换的实例，纯手工，没有使用任何插件~ html lang="zh-CN"> head> meta charset="utf-8"> meta name="viewport" content="width=device-width"> title>小惊喜-给生活一点惊喜title> link rel="shortcut icon" type="image/ico" href
21款大气的全屏图片切换代码
weixin_30765475的博客
07-21 695
html5全屏背景切换点击按钮svg背景滑动切换特效 jQuery全屏响应式手指滑动图片轮播代码 jquery商城网站全屏多张图片滑动切换代码 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 html5响应式全屏滚动图片切换幻灯片特效 jQuery全屏带进度条图片轮播特效 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 ...
Element.requestFullscreen()方法
weixin_30787531的博客
09-14 2189
亲测 IE浏览器仅 IE11 支持 document.getElementById("fullScreen").onclick = function() { if (document.documentElement.RequestFullScreen) { document.documentElement.RequestFullScreen();...
vue中使用全屏，el-tooltip失效
最新发布
06-09
在 Vue 中使用全屏模式时，可能会导致 `el-tooltip` 失效的问题，这是因为全屏模式会将页面的 DOM 结构重新渲染，导致 `el-tooltip` 组件失去了绑定的元素。解决这个问题的方法是在全屏模式下重新初始化 `el-tooltip` 组件。 以下是一种解决方案： 1. 在需要使用 `el-tooltip` 的组件中，添加一个 `ref` 属性，例如： ```html <el-button ref="myButton" v-tooltip="'这是一个提示信息'">Hover Me</el-button> ``` 2. 在 Vue 实例中，定义一个方法 `initTooltip`，该方法会在进入全屏模式时被调用，并且重新初始化 `el-tooltip` 组件，例如： ```javascript methods: { initTooltip() { this.$nextTick(() => { const buttonEl = this.$refs.myButton.$el buttonEl._tooltip && buttonEl._tooltip.doDestroy() new Tooltip(buttonEl, { placement: 'top', content: '这是一个提示信息', trigger: 'hover' }) }) } } ``` 3. 在全屏模式下，调用 `initTooltip` 方法即可重新初始化 `el-tooltip` 组件，例如： ```javascript document.documentElement.requestFullscreen().then(() => { this.initTooltip() }) ``` 通过这种方式，即可在全屏模式下使用 `el-tooltip` 组件，并且保证其正常工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值