前端实用插件

超酷插件网站：http://www.5iweb.com.cn/

1.转盘使用的旋转插件 JqueryRotate

下载地址：https://download.csdn.net/download/zhuyu19911016520/7224863

使用方法：https://www.jianshu.com/p/b632a1ed6a57

2.百叶窗图片轮播插件 jquery blindify

下载地址：https://download.csdn.net/download/lianzhang861/10480551

使用方法：

使用

首先，你必须包括blindify的CSS文件（或只是代码复制并粘贴到你自己的页面），包括一个版本的jQuery库和完全或简化版的blindify。比如:

1 2 3

< link  rel = "stylesheet"  href = "blindify.css"  media = "all"  /> < script  type = "text/javascript"  src = "jquery-1.10.2.min.js" ></ script > < script  type = "text/javascript"  src = "jquery.blindify.js" ></ script >

之后，你需要一个图像列表，包在一个独特的ID。容器单元例：

1 2 3 4 5 6 7 8

< div  id = "blindify" >      < ul >          < li >< img  src = "photo_1.jpg"  alt = ""  /></ li >          < li >< img  src = "photo_2.jpg"  alt = ""  /></ li >          < li >< img  src = "photo_3.jpg"  alt = ""  /></ li >          < li >< img  src = "photo_4.jpg"  alt = ""  /></ li >      </ ul > </ div >

你可以让整个幻灯片是一个链接到一个特定的页面，通过使用一个锚点元素的容器，例如：

1 2 3 4 5 6 7 8

< a  href = "#"  id = "blindify" >      < ul >          < li >< img  src = "photo_1.jpg"  alt = ""  /></ li >          < li >< img  src = "photo_2.jpg"  alt = ""  /></ li >          < li >< img  src = "photo_3.jpg"  alt = ""  /></ li >          < li >< img  src = "photo_4.jpg"  alt = ""  /></ li >      </ ul > </ a >

如果你希望每个图像指向一个唯一的URL，你只需要指定一个选项在初始化插件，和格式化你的代码如下：

1 2 3 4 5 6 7 8

< div  id = "blindify" >      < ul >          < li >< a  href = "#" >< img  src = "photo_1.jpg"  alt = ""  /></ a ></ li >          < li >< a  href = "#" >< img  src = "photo_2.jpg"  alt = ""  /></ a ></ li >          < li >< a  href = "#" >< img  src = "photo_3.jpg"  alt = ""  /></ a ></ li >          < li >< a  href = "#" >< img  src = "photo_4.jpg"  alt = ""  /></ a ></ li >      </ ul > </ div >

最后，应用blindify到您的HTML代码，你只需要初始化它并将它附加到元素作为容器，例如：

1 2 3 4 5

<script type= "text/javascript" >      $(document).ready( function (){          $( '#blindify' ).blindify();      }); </script>

您可以重写插件的默认选项，这样：

1 2 3 4 5 6 7 8 9

<script type= "text/javascript" >      $(document).ready( function (){          $( '#blindify' ).blindify({              numberOfBlinds: 10,              animationSpeed: 600,              delayBetweenSlides: 200          });      }); </script>

3.强大的图片预览功能 queryViewer

下载地址：https://download.csdn.net/download/lianzhang861/10480866

使用方法：

1.引入css和js

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

2. html 部分

<ul id="viewer">
    <li><img src="img/tibet-1.jpg" data-original="img/tibet-1.jpg" alt="图片1"></li>
    <li><img src="img/tibet-2.jpg" data-original="img/tibet-2.jpg" alt="图片2"></li>
    <li><img src="img/tibet-3.jpg" data-original="img/tibet-3.jpg" alt="图片3"></li>
    <li><img src="img/tibet-4.jpg" data-original="img/tibet-4.jpg" alt="图片4"></li>
    <li><img src="img/tibet-5.jpg" data-original="img/tibet-5.jpg" alt="图片5"></li>
    <li><img src="img/tibet-6.jpg" data-original="img/tibet-6.jpg" alt="图片6"></li>
</ul>

插件默认会取图片的src地址。如果想要放大之后换一张大图的话，可以把大图的路径写在data-original属性中，然后设置url : "data-original" 。

alt用来存放图片的标题。

3. JavaScript 部分

$('#viewer').viewer();

配置

名称	类型	默认值	说明
inline	布尔值	false	启用 inline 模式
button	布尔值	true	显示右上角关闭按钮（jQuery 版本无效）
navbar	布尔值/整型	true	显示缩略图导航
title	布尔值/整型	true	显示当前图片的标题（现实 alt 属性及图片尺寸）
toolbar	布尔值/整型	true	显示工具栏
tooltip	布尔值	true	显示缩放百分比
movable	布尔值	true	图片是否可移动
zoomable	布尔值	true	图片是否可缩放
rotatable	布尔值	true	图片是否可旋转
scalable	布尔值	true	图片是否可翻转
transition	布尔值	true	使用 CSS3 过度
fullscreen	布尔值	true	播放时是否全屏
keyboard	布尔值	true	是否支持键盘
interval	整型	5000	播放间隔，单位为毫秒
zoomRatio	浮点型	0.1	鼠标滚动时的缩放比例
minZoomRatio	浮点型	0.01	最小缩放比例
maxZoomRatio	数字	100	最大缩放比例
zIndex	数字	2015	设置图片查看器 modal 模式时的 z-index
zIndexInline	数字	0	设置图片查看器 inline 模式时的 z-index
url	字符串/函数	src	设置大图片的 url
build	函数	null	回调函数，具体查看演示
built	函数	null	回调函数，具体查看演示
show	函数	null	回调函数，具体查看演示
shown	函数	null	回调函数，具体查看演示
hide	函数	null	回调函数，具体查看演示
hidden	函数	null	回调函数，具体查看演示
view	函数	null	回调函数，具体查看演示
viewed	函数	null	回调函数，具体查看演示

 

参数的用法：

$('#viewer').viewer({url:"data-original"});

4.jquery filterizr图片筛选插件

下载地址：https://download.csdn.net/download/lianzhang861/10480926

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>jQuery筛选过滤插件Filterizr演示-多选</title>

<style>
* { margin: 0; padding: 0;}
ul { list-style-type: none;}
.nav { width: 1000px; margin: 0 auto 20px; text-align: center; font-size: 0;}
.nav li { display: inline-block; margin: 0 5px; padding: 10px 20px; font-size: 14px; color: #333; background-color: #ccc; cursor: pointer;}
.nav .active { color: #fff; background-color: #21b384;}
.jq22 { width: 1000px; margin: 0 auto; font-size: 0;}
.filtr-item { display: inline-block; width: 230px; padding: 10px;}
.filtr-item img { width: 100%;}
</style>
</head>

<body>
<h1>多选</h1>

<ul class="nav">
	<li data-multifilter="1">代码</li>
	<li data-multifilter="2">素材</li>
	<li data-multifilter="3">模板</li>
</ul>

<div class="jq22">
	<div class="filtr-item" data-category="2">
		<img src="img/a1.png" alt="">
	</div>
	<div class="filtr-item" data-category="1">
		<img src="img/a2.png" alt="">
	</div>
	<div class="filtr-item" data-category="1">
		<img src="img/a3.png" alt="">
	</div>
	
	<div class="filtr-item" data-category="3">
		<img src="img/a4.png" alt="">
	</div>
	<div class="filtr-item" data-category="1">
		<img src="img/a5.png" alt="">
	</div>
	<div class="filtr-item" data-category="2">
		<img src="img/a6.png" alt="">
	</div>
	<div class="filtr-item" data-category="1">
		<img src="img/a7.png" alt="">
	</div>
	<div class="filtr-item" data-category="2">
		<img src="img/a8.png" alt="">
	</div>
	<div class="filtr-item" data-category="2">
		<img src="img/a9.png" alt="">
	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.js"></script>
<script>
$(function() {
	$('.jq22').filterizr();

	$('.nav li').on('click', function() {
		$(this).toggleClass('active');
	});
});
</script>

如果需要在额外的标签中加入控制，需要用到其他的 data 属性，如：

1）单选：

1 2 3 4

< li  data-filter = "all" >全部</ li > < li  data-filter = "1" >分类1</ li > < li  data-filter = "2" >分类2</ li > < li  data-filter = "3" >分类3</ li >

2）多选：

1 2 3

< li  data-multifilter = "1" >代码</ li > < li  data-multifilter = "2" >素材</ li > < li  data-multifilter = "3" >模板</ li >

3）排序：

1 2 3

< li  class = "shuffle-btn"  data-shuffle>随机</ li > < li  class = "sort-btn"  data-sortAsc>顺序</ li > < li  class = "sort-btn"  data-sortDesc>倒序</ li >

4）搜索：

1	< input  class = "keyword"  placeholder = "请输入关键字"  data-search>

3、JavaScript

1	$( '.jq22' ).filterizr();

配置

属性

名称	类型	默认值	说明
animationDuration	数值	0.5	动画持续时间，单位为秒
callbacks	对象		回调函数
delay	对象	0	延迟，单位为毫秒
delayMode	字符串	progressive
easing	字符串	ease-out	动画方式
filter	数组/字符串	0	指定筛选/过滤某分类
filterOutCss	对象		”淡出“的样式
filterInCss	对象		”淡入“的样式
layout	字符串	sameSize	布局方式，可选 packed / horizontal / vertical / sameHeight / sameWidth / sameSize
setupControls	布尔值	true	建立控制，设置为 true 时，对应的含有 data 属性（如 data-filter=”1″）的标签才能触发控制