zoukankan      html  css  js  c++  java
  • svg-高斯模糊+swiper伦播

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <link rel="stylesheet" type="text/css" href="basic/css/swiper.min.css"/>
     7     <style type="text/css">
     8             .gaosi{
     9                     filter:url("#f1");
    10                 }
    11             .swiper-container{
    12                 width: 100%;
    13                 height: 300px;
    14                 overflow: hidden;
    15             }
    16             img{
    17                 width: 100%;
    18                 height: 100%;
    19             }
    20             
    21             
    22         </style>
    23     </head>
    24     <body>
    25         <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
    26                 viewBox="0,0,500,500" width="500" height="" aria-labelledby="title desc">
    27                     <title id="title"></title>
    28                     <desc id="desc"></desc>
    29                 <defs>
    30                     <filter id='f1'>
    31                         <feGaussianBlur in = "SourceGraphic" stdDeviation="0" id="fe"/>
    32                     </filter>
    33                 </defs>    
    34                     
    35             <div class="swiper-container">
    36             <div class="swiper-wrapper">
    37                 <div class="swiper-slide"><img src="img/001.jpg" class="img gaosi"/></div>
    38                 <div class="swiper-slide"><img class = "img gaosi" src="img/002.jpg"/></div>
    39                 <div class="swiper-slide"><img class = "img gaosi" src="img/003.jpg"/></div>
    40             </div>
    41             <div class="swiper-pagination">
    42                 
    43             </div>
    44         </div>
    45         </svg>
    46         <script type="text/javascript" src="basic/js/swiper.min.js"></script>
    47         <script type="text/javascript">
    48             var mySwiper = new Swiper('.swiper-container',{
    49                 pagination :'.swiper-pagination',
    50                 onSlideChangeStart: function(swiper){
    51                     var fe = document.querySelector('#fe');    
    52                     fe.setAttribute('stdDeviation',15);            
    53                 },
    54                 onSlideChangeEnd: function(swiper){
    55                     var fe = document.querySelector('#fe');
    56                     var x = 15;
    57                     var timer = setInterval(function(){
    58                         x--;
    59                         fe.setAttribute('stdDeviation',x);
    60                         if(x<=0){
    61                             clearInterval(timer)
    62                         }
    63                     },40)
    64                     }
    65             })
    66                 
    67         </script>
    68     </body>
    69 </html>
  • 相关阅读:
    until循环
    linux的shell使用
    shell通配符(元字符)
    linu运算
    mail邮件
    linux命令
    redis笔记
    mysql 5.7安装方法
    mysql5.7.25搭建mysql-5.7.25.tar.gz包(亲验)
    mysql数据迁移
  • 原文地址:https://www.cnblogs.com/jessical626/p/5978644.html
Copyright © 2011-2022 走看看