js/css插件总结

1. 定位导航滚动插件 jQuery-One-Page-Nav
   
   下载链接: git

<ul id="nav">
    <li><a href="#a0">花卉详情</a></li>
     <li><a href="#a1">介绍</a></li>
     <li><a href="#a2">形态特征</a></li>
     <li><a href="#a3">生长习性</a></li>
     <li><a href="#a4">栽培技术</a></li>
     <li><a href="#a5">主要价值</a></li>
 </ul>
 <div class="box">
     <div id="a0" ">花卉详情</div>
     <div id="a1" ">介绍</div>
     <div id="a2" ">形态特征</div>
     <div id="a3" ">生长习性</div>
     <div id="a4" ">栽培技术</div>
     <div id="a5" ">主要价值</div>
 </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.nav.js"></script>
  <script>
  $('#nav').onePageNav({
        currentClass: 'active',
        changeHash: false,
        scrollSpeed: 750,
        scrollThreshold: 0.5,
        filter: '',
        easing: 'swing'
    });
  </script>

参数描述

2.数字动画插件jquery.countup.js

git下载

<span class="counter">1500</span>

<script type="text/javascript" src="./../js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="./../js/jquery.countup.js"></script>
<script type="text/javascript" src="./../js/jquery.waypoints.min.js"></script>

$('.counter').countUp({
   delay: 5,		//	每个数字动画的延迟时间，单位毫秒
   time: 1000	//	计数动画总的持续时间
});

参数描述

3. 瀑布流插件masory
   
   参考链接
   下载链接

4. 日历插件datatimepicker
   
   git下载

5. css动画插件
   下载地址

<link rel="stylesheet" href="css/animate.css">
jQuery(ele).children('h2').addClass('animated slideInLeft');

6. 旋转动画插件 jqueryrotate.js
   我是用在大转盘上的，本来准备用css动画实现效果的，可是发现旋转角度并不是那么简单计算的，于是用了这个插件，下载地址可真不好找。
   可以分别设置总旋转角度、旋转度数、旋转速度以及旋转完成后的回调函数

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>

7. 旋转木马插件 jquery.carousel-1.1.min.js
   
   链接

当有偶数n个图片会展示n-1个图片，但是在旋转的时候隐藏的图片会出来的

<script type="text/javascript" src="./../js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="./../js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="./../js/jquery.carousel-1.1.min.js"></script>

<div class="carousel"> <!-- BEGIN CONTAINER -->
   <ul class="slides"> <!-- BEGIN CAROUSEL -->
		<li class="slideItem">
			<a href="#"><img src="" alt=""></a>
		</li>
		<li class="slideItem">
			<a href="#"><img src="" alt=""></a>
		</li>
		<li class="slideItem">
			<a href="#"><img src="" alt=""></a>
		</li>
   </ul> <!-- END SLIDES -->
   <div class=" prevButton">
       <svg class="icon svg-icon" aria-hidden="true">
           <use xlink:href="#iconarrowdown"></use>
       </svg>
   </div>
   <div class="nextButton">
       <svg class="icon svg-icon" aria-hidden="true">
           <use xlink:href="#iconarrowdown"></use>
       </svg>
   </div>
</div>

$('.carousel').carousel({carouselWidth:735,carouselHeight:485,directionNav:true,frontWidth:340,frontHeight:485,backZoom:0.9});

.carousel
{
	position :relative ;
	margin :0 auto;
	width :930px;
	height :auto;
	border :none;
	overflow : visible ;
}
.carousel .slides
{
	margin :0;
	padding :0;
	border :none;
	list-style :none;
	position :relative ;
	overflow :visible ;
}
.carousel .slides .slideItem 
{
	position :absolute ;
	cursor :pointer ;
	overflow : hidden;
	padding :0;
	margin :0;
	border :none;
}
.carousel .slides .slideItem a
{
	display: block ;
	text-decoration :none;
	margin :0;
	padding :0;
	border :none;
	outline :none;
}
.carousel .slides .slideItem img
{
	margin :0;
	padding :0;
	border :none;
	width :100%;
	height :100%;
}