jQuery插件

最新推荐文章于 2024-01-05 19:47:22 发布

码仆的逆袭

最新推荐文章于 2024-01-05 19:47:22 发布

阅读量210

点赞数

分类专栏：前端-JQuery

本文链接：https://blog.csdn.net/qq_34191426/article/details/105622967

版权

前端-JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery插件

easing插件（动画插件）

jQuery的动画一般默认是一个匀速动画，easing是jQuery的一个插件，使用它可以创建更加绚丽的动画效果。

	//最终样式，动画时间，easing效果,回调函数
	$('.car').animate({"left":"150%"},6000,"easeInElastic",function(){
		//回调函数
	});

easing支持的动画效果

在这里插入图片描述

stellar插件（视差滚动插件）

首先设置背景图片为固定定位
引用jQuery.js
引用stellar.js

demo：

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.stellar.min.js"></script>
		<style>
			body {
				font-size: 20px;
				color: white;
				text-shadow: 0 1px 0 black, 0 0 5px black;
			}
			
			p {
				padding: 0 0.5em;
				margin: 0;
			}
			
			
			#content1 {
				background: url("img/1.jpg") no-repeat fixed;
				background-size: 100% 100%;
			}
			
			#content2 {
				background: url("img/2.jpg") no-repeat fixed;
				background-size: 100% 100%;
			}
			
			#content3 {
				background: url("img/3.jpg") no-repeat fixed;
				background-size: 100% 100%;
			}
			
			#content4 {
				background: url("img/4.jpg") no-repeat fixed;
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<div class="content" id="content1" data-stellar-background-ratio="0.3">
			<p>TEXT HERE</p>
		</div>
		<div class="content" id="content2" data-stellar-background-ratio="0.3">
			<p>TEXT HERE</p>
		</div>
		<div class="content" id="content3" data-stellar-background-ratio="0.3">
			<p>TEXT HERE</p>
		</div>
		<div class="content" id="content4" data-stellar-background-ratio="0.3">
			<p>TEXT HERE</p>
		</div>
		<script>
			$(function() {
				//设置每一个div的高度为当前屏幕的高度
				$('.content').height($(window).height());
				
				$.stellar({
					horizontalScrolling:false,
					responsive:true
				})
			})
		</script>
	</body>

stellar插件详细参数

名称	说明
horizontalScrolling 和 verticalScrolling	该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向，为布尔值，默认为true
responsive	该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false
hideDistantElements	该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false`
data-stellar-ratio=“2”	定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。
data-stellar-background-ratio	该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。例如值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置