<!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. （转）清理AIX的/var文件系统大小

    在ROOTVG空间有限,且/var文件系统的空间已经足够大的情况下,/var文件系统空间快满了,这种情况怎么处理?IBM给了一个很好的处理流程: 使用find 命令检查在/var目录中所有大于1MB的 ...

  2. ListView:The content of the adapter has changed but ListView did not receive a notification终极解决方法

    使用ListView时遇到如下的异常信息: 10-26 18:30:45.085: E/AndroidRuntime(7323): java.lang.IllegalStateException: T ...

  3. 转 Windows+VS2013爆详细Caffe编译安装教程

    1. 安装cuda Cuda是英伟达推出的GPU加速运算平台 我这里安装的是cuda7.5,已经安装过的忽略,还没有安装过的这里有安装教程.windows下面安装还是非常简单的. 点击打开链接    ...

  4. 小技巧找出一个php的cron脚本出问题的代码行

    这个小技巧虽然很小,但是很有用. 我写了一个cron脚本,但是隔一天发现,这个昨天的cron脚本还一直在跑着,没有停下来,一定是里面有个程序堵住了. 但是如果我重新跑又需要很多时间.这个怎么办? 现在 ...

  5. CSS魔法堂：hasLayout原来是这样!

    前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasL ...

  6. Entity Framework基础01

    学习了ADO.NET的相关知识,掌握了它对数据库表的基本操作,但是实际在开发项目应用中微软为我们开发ef这个ORM,使用它可以很方便的利用ADO.NET来操作DBMS,使得我们开发项目的着重点放在业务 ...

  7. 相关子查询【SQL Server】

    查询book表中大于该类图书价格平均值的图书信息 先将第一条记录的类编号的值为2代入子查询中,子查询为 select avg(price) from book b where b.id=2 则得到类编 ...

  8. 【WebService】WebService的创建和使用——文件名称生成器

    简介 之前做过一个文件名称生成器,通过Webservice读取XML文件并将其通过Json传到客户端中的combobx,用户通过combobox选择要生成文件的名称模板,点击生成则会产生一个文件名称并 ...

  9. MVC的路径查找顺序

    使用MVC的朋友们,知道MVC的funny之处. 但是如果出现路径找不到,请记住以下的页面路径寻找顺序. http://www.cnblogs.com/sosoft/ 首先,知道你的Controlle ...

  10. WCF双工通讯以及客户端间的间接通讯

    由于学习计划安排不当,对WCF的认知一直停滞不前,最近工作上又用回了WCF,重拾一下,看到蒋老师介绍双工通讯的博文,实践一下,积累一下.原想着WCF的双工通讯就是原本的客户端能调用服务端的方法之余,服 ...