JQUERY WEB照片滤镜-INSTAGRAM FILTERS APP

所属分类： JQ特效媒体图像

查看演示立即下载

插件描述：今天我要给大家介绍一款由jquery打造的web app：Instagram Filters，该插件允许我们将一张照片拖放到网页中，然后给照片加上各种各样的滤镜，处理完照片后，还可以将照片保存到自己的电脑中。

更新时间：2019-09-18 13:56:34

更新说明：修改jq库地址失效问题,修改演示文件提示

今天我要给大家介绍一款由jquery打造的web app：Instagram Filters，该插件允许我们将一张照片拖放到网页中，然后给照片加上各种各样的滤镜，处理完照片后，还可以将照片保存到自己的电脑中。

使用步骤

1、引入以下的js和css文件

<link href="assets/css/style.css" rel="stylesheet">
<scriptsrc="/"></script>
<script src="assets/js/filereader.min.js"></script>
<script src="assets/js/caman.full.js"></script>
<script src="assets/js/jquery.mousewheel.min.js"></script>
<script src="assets/js/script.js"></script>

2、在body标签中加入以下格式的html代码，其中分为两部分，#photo就是我们可以拖放并预览照片的div，而#filterContainer则是，我们添加滤镜的容器。

<div id="photo">
</div>
<div id="filterContainer">
    <ul id="filters">
          
        <li>
            <a href="#" id="normal">Normal</a>
        </li>
  
        <li>
            <a href="#" id="vintage">Vintage</a>
        </li>
  
        <li>
            <a href="#" id="lomo">Lomo</a>
        </li>
  
        <li>
            <a href="#" id="clarity">Clarity</a>
        </li>
  
        <li>
            <a href="#" id="sinCity">Sin City</a>
        </li>
  
    </ul>
  
</div>

参数配置

官方并未提供参数的文档，不过大家可以查看 script.js 文件，里面会有相关的配置，在这里我就不讲解了。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：推荐一款JQUERY UI插件-ZINO UI
下一个特效： CSS3圆形图片遮罩特效-CIRCLE HOVER EFFECTS