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>
