js修炼——手写全屏滚动插件

小灰灰 2022-06-16 14:37 199阅读 0赞

全屏滚动是目前网站开发常用的效果，笔者也曾使用过类似插件，但是对此类插件的开发一直抱有强烈兴趣，而今在前人的经验指导下，终于领悟到了一些插件开发的思维。

如下效果：

![20170517141141865][]

接下来看PageSwitch.js代码

总结一下：

1.本插件多次运用闭包，减少全局变量的外露，避免污染全局

2.采用构造方法却不用再HTML代码中实例化，只需建立jQuery对象调用挂载在jQuery原型上的PageSwitch方法，该PageSwitch方法利用单利模式返回唯一一个PageSwitch实例对象

3.在原型对象的运用上比较灵活，PageSwitch构造方法的原型上挂载了事件方法，$.fn上挂载了PageSwitch实例对象和默认参数

4.在兼容性处理上也单独写了\_prefix

最后，挂上HTML代码，供大家调试使用

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/pageSwitch.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			html,
    			body {
    				height: 100%;
    				overflow: hidden;
    			}
    			
    			#container,
    			.sections,
    			.section {
    				height: 100%;
    				position: relative;
    			}
    			
    			.section {
    				background-color: #000;
    				background-size: cover;
    				background-position: 50% 50%;
    				text-align: center;
    				color: white;
    			}
    			
    			#section0 {
    				background: url(img/1.jpg);
    			}
    			
    			#section1 {
    				background: url(img/2.jpg);
    			}
    			
    			#section2 {
    				background: url(img/3.jpg);
    			}
    			
    			#section3 {
    				background: url(img/4.jpg);
    			}
    		
    			.pages {
    				position: fixed;
    				right: 10px;
    				top: 50%;
    				list-style: none;
    			}
    			.pages li {
    				width: 8px;
    				height: 8px;
    				border-radius: 50%;
    				background: #fff;
    				margin: 10px 5px;
    				cursor: pointer;
    			}
    			.pages li.active {
    				width: 14px;
    				height: 14px;
    				border: 2px solid #FFFE00;
    				background: none;
    				margin-left: 0;
    			}
    			
    			
    		</style>
    	</head>
    
    	<body>
    		<div id="container">
    			<div class="sections">
    				<div class="section" id="section0">
    					<h3>this is the page0</h3>
    				</div>
    				<div class="section" id="section1">
    					<h3>this is the page1</h3>
    				</div>
    				<div class="section" id="section2">
    					<h3>this is the page2</h3>
    				</div>
    				<div class="section" id="section3">
    					<h3>this is the page3</h3>
    				</div>
    
    			</div>
    		</div>
    
    		<script type="text/javascript">
    			$("#container").PageSwitch();
    		</script>
    	</body>
    
    </html>

本插件只是实现了竖屏滚动，也没有实现键盘事件，还具有很大的扩展空间

[20170517141141865]: /images/20220616/2caa917b39e644ac8b6fe4c567de7114.png