66代码吧 关注:3贴子:31
  • 4回复贴,共1

blurify.js图片模糊滤镜效果

只看楼主收藏回复



1楼2017-07-11 09:41回复
    HTML代码:
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title>小巧的js图片模糊效果插件</title>
    </head>
    <body>
    <div class="container">
    <header class="header">
    <h3>小巧的js图片模糊效果插件 <span>A tiny(~2kb) library to blurred pictures</span></h3>
    </header>
    <div class="content">
    <img src="img/1.jpg">
    <div class="pic-containaer">
    <img data-src="img/1.jpg" alt="" class="blurify1">
    <span class="desc">blur: 1</span>
    </div>
    <div class="pic-containaer">
    <img data-src="img/1.jpg" alt="" class="blurify2">
    <span class="desc">blur: 2</span>
    </div>
    <div class="pic-containaer">
    <img data-src="img/1.jpg" alt="" class="blurify3">
    <span class="desc">blur: 3</span>
    </div>
    <div class="pic-containaer">
    <img data-src="img/1.jpg" alt="" class="blurify4">
    <span class="desc">blur: 4</span>
    </div>
    <div class="pic-containaer">
    <img data-src="img/1.jpg" alt="" class="blurify5">
    <span class="desc">blur: 5</span>
    </div>
    <div class="pic-containaer">
    <img data-src="img/1.jpg" alt="" class="blurify6">
    <span class="desc">blur: 6</span>
    </div>
    </div>
    </div>
    </body>
    </html>


    3楼2017-07-11 09:46
    回复
      内部引用js和css样式:
      <link rel="stylesheet" type="text/css" href="css/normalize.css" />
      <style type="text/css">
      body{background-color: #191919;color: #fff}
      .content{
      width: 650px;
      margin:30px auto;
      }
      h3{text-align: center}
      .pic-containaer{
      display: inline-block;
      width: 300px;
      height: 300px;
      position: relative;
      }
      .pic-containaer img{
      width: 300px;
      }
      .pic-containaer span{
      display: block;
      position: absolute;
      width: 100px;
      height: 30px;
      top: 0;
      left: 0;
      background: #2d3e50;
      line-height: 26px;
      padding: 2px;
      }
      </style>


      4楼2017-07-11 09:46
      回复
        <script src="dist/blurify.js"></script>
        <script>
        (function () {
        new blurify({
        images: document.querySelectorAll('.blurify1'),
        blur: 1,
        mode: 'auto',
        });
        new blurify({
        images: document.querySelectorAll('.blurify2'),
        blur: 2,
        mode: 'auto',
        });
        new blurify({
        images: document.querySelectorAll('.blurify3'),
        blur: 3,
        mode: 'auto',
        });
        new blurify({
        images: document.querySelectorAll('.blurify4'),
        blur: 4,
        mode: 'auto',
        });
        new blurify({
        images: document.querySelectorAll('.blurify5'),
        blur: 5,
        mode: 'auto',
        });
        new blurify({
        images: document.querySelectorAll('.blurify6'),
        blur: 6,
        mode: 'auto',
        });
        })();
        </script>


        5楼2017-07-11 09:47
        回复
          素材下载网址:http://www.66daima.com/js/1808.html
          素材演示地址:http://www.66daima.com/jquery/18/1808/demo/


          6楼2017-07-11 09:48
          回复