您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 图片特效 >

    CSS3过滤器实现图片模糊与高亮显示

    时间:2014-03-14 08:36 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • jQuery与CSS3过滤器实现的图片模糊与高亮显示插件,插件基于jquery.tiltShift.js,兼容的浏览器:IE9/火狐、chrome、Safari、Opera等。IE8不支持。若运行正常可看到图片中间是清淅的,四周是模糊的,像是高亮显示一样。
    • <!doctype html>
      <head>
      <title>使用CSS3过滤器制作图片模糊与高亮显示切换特效的jQuery插件</title>
      <style>
      @import url(http://fonts.googleapis.com/css?family=Lato:300,700);
      html {
          background: url(/jscss/demoimg/201403/roughcloth.png)
      }
      body {
          font-family:'Lato', sans-serif;
          color:#333;
          text-shadow:0 1px 0 rgba(255,255,255,1);
          line-height: 1.7;
          font-size:18px;
      }
      .frame {
          position:relative;
          width:400px;
          height:400px;
          float:left;
          margin:20px 40px 20px 0;
          -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
          border:5px solid white;
      }
      .tiltshift-layer {
          -webkit-transition: opacity 0.5s ease-in-out;
          transition: opacity 0.5s ease-in-out;
          opacity:1;
          cursor:pointer;
      }
      .frame:hover .tiltshift-layer {
          opacity:0;
      }
      a {
          color:#ed3314;
          text-decoration: none;
      }
      .clear {
          clear:both;
      }
      #main {
      width:860px;
      margin:0 auto;
          overflow:visible;
          padding-bottom:40px;
          position:relative;
      }
      h1 {
          font-size:56px;
          margin:10px 0 0;
      }
      h2 {
          border-bottom:1px solid rgba(0,0,0,0.2);
          padding-bottom:5px;
          margin:40px 0;
      }
      .social {
          position:absolute;
          top:0;
          right:0;
      }
      #hover {
          width:90px;
          height:65px;
          position:absolute;
          top:60px;
          background:url(/jscss/demoimg/201403/hover.png) no-repeat;
          left: -120px;
      }
      .desc {
          width:400px;
          float:left;
      }
      .desc p:first-child {
          margin-top:0;
      }
      .frame:nth-child(even) {
          margin-right:0;
      }
      .avatar {
          -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3);
          border:5px solid white;
          margin:0 20px 40px 0;
          float:left;
          height:80px;
          width:80px;
          clear: left;
      }
      code {
          display:block;
          background:rgba(0,0,0,0.05);
          padding:10px;
          font-size:15px;
      }
      .tiltshift-wrap {
          display:inline-block;
          position:relative;
          overflow:hidden;
      }
      .tiltshift-layer {
          position:absolute;
          overflow:hidden;
          top:0;
          right:0;
          bottom:0;
          left:0;
          background-repeat:no-repeat;
          background-position:0 0;
      }
      </style>
      <script src="/ajaxjs/jquery-1.9.1.min.js"></script>
      <script>
      (function($) {
          $.fn.tiltShift = function(options) {
              $(this).each(function(){
                  var $this = $(this);
                  var $parent = $this.parent();
                  var s_position = $this.data('position');
                  var s_blur = $this.data('blur');
                  var s_focus = $this.data('focus');
                  var s_falloff = $this.data('falloff');
                  var s_direction = $this.data('direction');
                  // Setup DOM around Image (ugly but flexible)
                  var $wrap = $this.wrap('<div class="tiltshift-wrap" />').parent();
                  $wrap.prepend('<div class="tiltshift-before tiltshift-layer" />');
                  $wrap.append('<div class="tiltshift-after tiltshift-layer" />');
                  // Grab original image and assign to before & after
                  var src = $this.attr('src');
                  $parent.find('.tiltshift-layer').css('background-image', 'url(/jscss/demoimg/201403/' + src + ')');
                  // Set Blur
                  $parent.find('.tiltshift-layer').css({
                      '-webkit-filter': 'blur(' + s_blur + 'px) contrast(105%) saturate(105%)'
                  });
                  // Calculate Focus Boundaries (impacted by inFocus value)
                  var beforeEnd = ( s_position - ( s_focus / 2 ) ) / 100;
                  var afterEnd = ( ( 100 - s_position ) - ( s_focus / 2 ) ) / 100;
                  // Calculate Falloff Breakpoints (impacted by tightness value)
                  var beforeFall = ( ( beforeEnd - ( s_falloff / 100 ) ) * 100 ).toFixed(2);
                  var afterFall = ( ( afterEnd - ( s_falloff / 100 ) ) * 100 ).toFixed(2);
                  // Adjust back up to integers for gradient format
                  beforeEnd *= 100;
                  afterEnd *= 100;
                  // Set directional variables
                  var beforeDirection, afterDirection;
                  if ( s_direction === 'y' ) {
                      beforeDirection = '270deg';
                      afterDirection = '90deg';
                  } else if ( s_direction === 'x' ) {
                      beforeDirection = '180deg';
                      afterDirection = '0deg';
                  } else {
                      var angle = s_direction % 360;
                      beforeDirection = (angle + 180) + 'deg';
                      afterDirection = angle + 'deg';
                  }
                  // Apply Gradient Mask to Image Layers
                  $parent.find('.tiltshift-before').css({
                      '-webkit-mask-image' : '-webkit-linear-gradient(' + beforeDirection + ', rgba(0,0,0,1) 0, rgba(0,0,0,1) ' + beforeFall + '%, rgba(0,0,0,0) ' + beforeEnd + '%)'
                  });
                  $parent.find('.tiltshift-after').css({
                      '-webkit-mask-image' : '-webkit-linear-gradient(' + afterDirection + ', rgba(0,0,0,1) 0, rgba(0,0,0,1) ' + afterFall + '%, rgba(0,0,0,0) ' + afterEnd + '%)'
                  });
              });
          };
      })(jQuery);
      jQuery(document).ready(function() {
           $('.tiltshift').tiltShift();
       });
      </script>
      <!-- tiltShift plugin end (I know, was crazy) -->
      </head>
      <body>
      <article id="main">
      <header>
      <div style=" color:#000; width:600px;margin:0 auto; text-align:center; font-size:12px;">
      <p>适用浏览器:FireFox、Chrome、Safari</p>
      </div>
            </header>
              <!-- tiltshift example 1 -->
              <div class="frame">
                  <img src="/jscss/demoimg/201403/example2.jpg" class="tiltshift" data-position="55" data-blur="2" data-focus="15" data-falloff="10" data-direction="y" class="tiltshift" data-position="70" data-blur="1" data-focus="10" data-falloff="20" data-direction="y" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y" class="tiltshift" data-position="50" data-blur="2" data-focus="4" data-falloff="6" data-direction="x" alt="See credits at bottom of page for Photograpger link">
              </div>
      </article>
          <!-- Place this tag after the last +1 button tag. -->
      </body>
      </html>

    CSS3过滤器实现图片模糊与高亮显示由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/6988.html
    标签:网站源码