图片滤镜高斯模糊

1、blur滤镜实现（ie10不兼容）

  <style>
    *{
      margin:0;
      padding: 0;
    }
    img{
      margin: 10px;
      width: 300px;
      height: 300px;
    }
    .blur {    
      -webkit-filter: blur(10px); /* Chrome, Opera */
      -moz-filter: blur(10px);
      -ms-filter: blur(10px);    
      filter: blur(10px);    
      filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); 
    }
  </style>
</head>
<body>
  <img src="img/logo.jpg" />
  <img class="blur" src="img/logo.jpg"  />
</body>

2、鼠标移到哪儿哪儿模糊

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html>
<head>
  <title>zepto</title>
  <meta name="name" content="content">
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <style type="text/css">

    .box { 
      width: 300px; 
      height: 500px;
      background: url(img/smalllogo.jpg) no-repeat fixed; 
      position: relative; 
      overflow: hidden;
    }
    .drag { 
      width: 100px; 
      height: 100px;
      background: inherit; 
      -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); 
      cursor: -webkit-grab; cursor: -moz-grab; cursor: grab;
      position: absolute; 
      overflow: hidden;
    }
    .drag:active {
      cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing;
    }
  </style>
  <body>
    <div class="box">
      <div id="drag" class="drag"></div>
    </div>
    <script type="text/javascript">
      var params = {
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
      };
    //获取相关CSS属性
    var getCss = function(o,key){
      return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];   
    };

    //拖拽的实现
    var startDrag = function(bar, target, callback){
      if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
      }
      if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
      }
      //o是移动对象
      bar.onmousedown = function(event){
        params.flag = true;
        if(!event){
          event = window.event;
          //防止IE文字选中
          bar.onselectstart = function(){
            return false;
          }  
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
      };
      document.onmouseup = function(){
        params.flag = false;  
        if(getCss(target, "left") !== "auto"){
          params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
          params.top = getCss(target, "top");
        }
      };
      document.onmousemove = function(event){
        var e = event ? event: window.event;
        if(params.flag){
          var nowX = e.clientX, nowY = e.clientY;
          var disX = nowX - params.currentX, disY = nowY - params.currentY;
          target.style.left = parseInt(params.left) + disX + "px";
          target.style.top = parseInt(params.top) + disY + "px";
          if (event.preventDefault) {
            event.preventDefault();
          }
          return false;
        }
        
        if (typeof callback == "function") {
          callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
        }
      } 
    };
    var eleDrag = document.getElementById("drag");
    if (eleDrag) {
      startDrag(eleDrag, eleDrag);
    }
  </script>
</body>
</html>

3、鼠标hover，其他图片模糊

<!DOCTYPE>
<html>
<head>
 <head>   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  <title>css3图片模糊过滤特效-柯乐义</title>   
  <style>   
    .keleyi img{ width:200px; height:200px;}   
    .keleyi{   
      list-style: none;   
      margin: 10px auto; padding: 0;   
      width: 642px; /* (200+10+4)x3 */  
      font-size: 0; /* fix inline-block spacing */  
    }   
    .keleyi li{   
      display: inline-block;   
      *display: inline;   
      zoom: 1;   
      width: 200px; height: 200px;   
      margin: 2px;   
      border: 5px solid #fff;   
      -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);   
      -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);   
      box-shadow: 0 2px 2px rgba(0,0,0,.1);   
      -webkit-transition: all .3s ease;   
      -moz-transition: all .3s ease;   
      -ms-transition: all .3s ease;   
      -o-transition: all .3s ease;   
      transition: all .3s ease;          
    }   
    .keleyi:hover li:not(:hover){         
      -webkit-filter: blur(2px) grayscale(1);   
      -moz-filter: blur(2px) grayscale(1);   
      -o-filter: blur(2px) grayscale(1);   
      -ms-filter: blur(2px) grayscale(1);   
      filter: blur(2px) grayscale(1);   
      opacity: .7; /* fallback */        
    }   
  </style>   
</head>   
<body>    
  <ul class="keleyi">   
    <li><img src="img/smalllogo.jpg"></li>   
    <li><img src="img/mm1.jpg"></li>     
  </ul>   
</body>   
</html>

posted on 2017-06-30 17:06 Newbie_小白阅读(296) 评论(0) 编辑收藏举报