欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端实用插件

程序员文章站 2022-05-06 09:40:03
...

超酷插件网站：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/*g861/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/*g861/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/*g861/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″）的标签才能触发控制




相关标签： 前端插件

上一篇： 简单易懂好用的Python+Excel实用操作：数据可视化-旭日图

下一篇： pdf.js使用小结

推荐阅读