<!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. 趣谈、浅析CRLF和LF

    作为程序员,在处理文件和输入输出的时候经常要跟CRLF和LF打交道.可能大家多少知道一些,但总是记不清楚,我也是这样的,因此写下这篇博文,作为记录. 首先,明确他们的意思:CR(回车),LF(换行). ...

  2. Java 集合 — HashMap

    HashMap 无序(每次resize的时候都会变) 非线程安全 key和value都看可以为null 使用数组和链表实现 查找元素的时候速度快 几个重要属性: loadFactor:用来计算thre ...

  3. ASP.NET MVC 4使用PagedList.Mvc分页

    ASP.NET MVC中进行分页的方式有多种,在NuGet上有提供使用PagedList.PagedList.Mvc进行分页. 1. 通过NuGet引用PagedList.Mvc 在安装引用Paged ...

  4. 使用替换shader渲染

    相关函数: Camera.RenderWithShader(shader: Shader, replacementTag: string) 使用指定shader渲染,只影响一帧 Camera.SetR ...

  5. NYOJ995硬币找零(简单dp)

    /* 题意:给你不同面额的硬币(每种硬币无限多),需要找零的面值是T,用这些硬币进行找零, 如果T恰好能被找零,输出最少需要的硬币的数目!否则请输出剩下钱数最少的找零方案中的最少硬币数! 思路:转换成 ...

  6. LoRaWAN协议(六)--OTAA KEY生成过程

    前言 通过OTAA方式入网的设备,通讯时使用的KEY需要通过服务器获得,在入网之间,设备无法通讯. 相关的OTAA入网流程已经在上一章中讲解过了,有兴趣的可以去看看**LoRaWAN协议(五)__OT ...

  7. php操作mongodb中的ISODate格式日期

    mongodb 中数据记录的日期格式为"dateCreated" : ISODate("2011-12-20T07:22:50.836Z")经过翻阅php官网中 ...

  8. 如何启动免安装版Tomcat并将Tomcat添加到服务中

    1.安装jdk,并配置环境变量 (1)在Path中添加 F:\Program Files\Java\jdk1.8.0_25\bin (2)添加一个JAVA_HOME变量,变量值为F:\Program ...

  9. ASP.NET和IIS工作原理

    图为iis6.0运行asp.net的原理. browser向iis发送HTTP请求,HTTP.SYS将其分发给W3SVC(World Wide Web Publishing Service),后者解析 ...

  10. SWFUpload简介及中文参考手册(share)

    SWFUpload SWFUpload 版本 2 概览 (Overview) 入门( Getting Started) js对象 (SWFUpload JavaScript Object) 构造器(C ...