<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <link rel="stylesheet" type="text/css" href="basic/css/swiper.min.css"/>

     <style type="text/css">

             .gaosi{

                     filter:url("#f1");

                 }

             .swiper-container{

                 width: 100%;

                 height: 300px;

                 overflow: hidden;

             }

             img{

                 width: 100%;

                 height: 100%;

             }

         </style>

     </head>

     <body>

         <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"

                 viewBox="0,0,500,500" width="500" height="" aria-labelledby="title desc">

                     <title id="title"></title>

                     <desc id="desc"></desc>

                 <defs>

                     <filter id='f1'>

                         <feGaussianBlur in = "SourceGraphic" stdDeviation="0" id="fe"/>

                     </filter>

                 </defs>    

             <div class="swiper-container">

             <div class="swiper-wrapper">

                 <div class="swiper-slide"><img src="img/001.jpg" class="img gaosi"/></div>

                 <div class="swiper-slide"><img class = "img gaosi" src="img/002.jpg"/></div>

                 <div class="swiper-slide"><img class = "img gaosi" src="img/003.jpg"/></div>

             </div>

             <div class="swiper-pagination">

             </div>

         </div>

         </svg>

         <script type="text/javascript" src="basic/js/swiper.min.js"></script>

         <script type="text/javascript">

             var mySwiper = new Swiper('.swiper-container',{

                 pagination :'.swiper-pagination',

                 onSlideChangeStart: function(swiper){

                     var fe = document.querySelector('#fe');

                     fe.setAttribute('stdDeviation',15);

                 },

                 onSlideChangeEnd: function(swiper){

                     var fe = document.querySelector('#fe');

                     var x = 15;

                     var timer = setInterval(function(){

                         x--;

                         fe.setAttribute('stdDeviation',x);

                         if(x<=0){

                             clearInterval(timer)

                         }

                     },40)

                     }

             })

         </script>

     </body>

 </html>

svg-高斯模糊+swiper伦播的更多相关文章

  1. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  2. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  3. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  4. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  5. swiper轮播图（逆向自动切换类似于无限循环）

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  6. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  7. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  8. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  9. Swiper轮播手动后不动

    最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...

随机推荐

  1. ASP.NET MVC在线人数统计

    在Global.asax.cs文件中代码: protected void Application_Start() { Application[; AreaRegistration.RegisterAl ...

  2. Spark MLlib - Decision Tree源码分析

    http://spark.apache.org/docs/latest/mllib-decision-tree.html 以决策树作为开始,因为简单,而且也比较容易用到,当前的boosting或ran ...

  3. 10分钟学会理解和解决MySQL乱码问题

    在阅读本文之前,强烈建议对字符集编码概念还比较模糊的同学 阅读下博主之前对相关概念的一篇科普:十分钟搞清字符集和字符编码 本博客已经迁移至: http://cenalulu.github.io/ 为了 ...

  4. bootstrap-datetimepicker.js学习

    之前项目运用到了这个时间控件,期间bug还是一些.抽个时间,简单地看一下. 先看一下datetimepicker.js的结构 var DateTimePicker = function(element ...

  5. Spark入门实战系列--6.SparkSQL（下）--Spark实战应用

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .运行环境说明 1.1 硬软件环境 线程,主频2.2G,10G内存 l  虚拟软件:VMwa ...

  6. C#中string.format的格式和用法

    String.Format 方法的几种定义: String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项. Str ...

  7. 反应堆模式最牛的那篇论文--由solidmango执笔翻译

    The Reactor:An Object-Oriented Wrapper for Event-Driven Port Monitoring and Service Demultiplexing 反 ...

  8. Elasticsearch 管理文档

    ES支持近实时的索引.更新.查询.删除文档,近实时就意味着刚刚索引的数据需要1秒钟后才能搜索到,这也是与传统的SQL数据库不同的地方. 更多的ES文档资料参考:Elasticsearch官方文档翻译 ...

  9. PetaPoco - 轻量级高性能的ORM框架（支持.NET Core）

    我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db. 而且市面上的orm框架有很多,有重量级的Entity Framework,有 ...

  10. 《ASP.NET SignalR系列》第五课 在MVC中使用SignalR

    接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET SignalR. 添加Signal ...