跨浏览器磨砂效果背景图片模糊特效 - JQuery/js插件 - 科蚁网
请选择 进入手机版 | 继续访问电脑版

跨浏览器磨砂效果背景图片模糊特效

[复制链接]
科蚁网小编 发表于 2015-7-14 11:42:53 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
JQuery/js插件信息(点击图片可以放大)
科蚁网发布的资源,版权归原作者所有,仅供学习交流,请勿用于商业用途。

应用终端: 传统PC 

资源级别: 免费资源

素材来源: 网络收集

推荐等级: ★★★★★

兼容浏览器: IE9 IE10 IE11 谷歌 火狐 欧朋 Safari 360 搜狗 

 

科蚁网温馨提示 1、本版块发布的JQuery/js插件均来自互联网,版权归原作者所有,科蚁网仅为存储空间。
2、科蚁网资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
4、如有侵犯您的版权,请及时联系2054226023#qq.com(#换@),我们将尽快做删除处理。
3、如果您发现科蚁网资源无法下载或链接失效或其他关于科蚁网站的问题,请到 站务中心区 发帖,我们将及时处理。

马上注册成为科蚁网会员,即可免费下载和分享手机建站资源!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名:跨浏览器磨砂效果背景图片模糊特效 
下载次数:7    下载所需积分:5 枚资源币
下载权限: 新手上路  [如何获取资源币]   [科蚁币]  可 [兑换资源币]  


代码:
  1. </div>
  2.                                                         </header>
  3.                             </div>
  4.                         </div>
  5.                     </div>
  6.                 </div>
  7.             </div>
  8.         </div>
  9.         <div class="container pdb30">
  10.                 <div class="row">
  11.                 <div class="col-md-12">
  12.                     <div class="page-header">
  13.                         <h2>点击下面图片切换顶部的图片:</h2>
  14.                     </div>
  15.                 </div>
  16.             </div>
  17.             <div class="row">
  18.                 <div class="col-md-3 col-sm-6 col-xs-6">
  19.                     <a href="#" class="preview-btn thumbnail">
  20.                         <img class="img-responsive" src="img/1.jpg" alt=""/>
  21.                     </a>
  22.                 </div>

  23.                 <div class="col-md-3 col-sm-6 col-xs-6">
  24.                     <a href="#" class="preview-btn thumbnail">
  25.                         <img class="img-responsive" src="img/4.jpg" alt=""/>
  26.                     </a>
  27.                 </div>

  28.                 <div class="col-md-3 col-sm-6 col-xs-6">
  29.                     <a href="#" class="preview-btn thumbnail">
  30.                         <img class="img-responsive" src="img/2.jpg" alt=""/>
  31.                     </a>
  32.                 </div>

  33.                 <div class="col-md-3 col-sm-6 col-xs-6">
  34.                     <a href="#" class="preview-btn thumbnail">
  35.                         <img class="img-responsive" src="img/3.jpg" alt=""/>
  36.                     </a>
  37.                 </div>
  38.             </div>
  39.             <div class="row">
  40.                     <div class="col-md-6">
  41.                             <p>Avatar-based backgrounds (click):</p>
  42.                             <div class="avatar-holder">
  43.                         <div class="avatar-container">
  44.                             <div class="avatar">
  45.                                 <img src="img/user1.jpg" alt=""/>
  46.                             </div>
  47.                             <div class="avatar">
  48.                                 <img src="img/user2.jpg" alt="">
  49.                             </div>
  50.                             <div class="avatar">
  51.                                 <img src="img/user3.jpg" alt="">
  52.                             </div>
  53.                         </div>
  54.                     </div>
  55.                     </div>
  56.                     <div class="col-md-6">
  57.                             <p>Tinted overlays:</p>
  58.                     <div id="tinted-holder"></div>
  59.                     <div class="tinted-thumbnails">
  60.                         <img src="img/1.jpg" alt=""/>
  61.                         <img src="img/3.jpg" alt=""/>
  62.                         <img src="img/4.jpg" alt=""/>
  63.                         <img src="img/2.jpg" alt=""/>
  64.                     </div>
  65.                     </div>
  66.             </div>
  67.         </div>
  68.        
  69.        
  70.         <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
  71.         <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
  72.         <script src="js/bootstrap.min.js"></script>
  73.         <script src="js/velocity.min.js"></script>
  74.         <script src="js/background-blur.min.js"></script>
  75.         <script>
  76.             // Scripts for demo page
  77.             $( document ).ready(function() {
  78.                 var $previewEl = $('#preview');
  79.                 var $avatarEl = $('.avatar');
  80.                 var $avatarHolderEl = $('.avatar-holder');
  81.                 var $tintedEl = $('.tinted-thumbnails img');
  82.                 var $tintedHolderEl = $('#tinted-holder');
  83.                 var images = [];
  84.                 var avatars = [];
  85.                 // Simple slideshow
  86.                 $('.preview-btn').each(function(){
  87.                     var $el = $(this);
  88.                     var img = $el.find('img').first().attr('src');
  89.                     images.push(img);

  90.                     $el.click(function(e){
  91.                         e.preventDefault();

  92.                         $previewEl.backgroundBlur(img);
  93.                     });
  94.                 });

  95.                 $previewEl.backgroundBlur({
  96.                     imageURL : images[0], // URL to the image that will be used for blurring
  97.                     blurAmount : 10, // Amount of blur (higher amount degrades browser performance)
  98.                     imageClass : 'bg-blur', // CSS class that will be applied to the image and to the SVG element,
  99.                     overlayClass : 'bg-blur-overlay', // CSS class of an element that will overlay the blur background (useful for additional effects or putting a spinner)
  100.                     duration: 1000, // If the image needs to be faded in, how long that should take
  101.                     endOpacity : 1 // Specify the final opacity that the image will have
  102.                 });

  103.                 // Avatar - based backgrounds
  104.                 $avatarEl.each(function(){
  105.                     var $avatar = $(this);
  106.                     var avatarImage = $avatar.find('img').first().attr('src');
  107.                     avatars.push(avatarImage);
  108.                     $avatar.click(function(e){
  109.                         e.preventDefault();

  110.                         $avatarHolderEl.backgroundBlur(avatarImage);
  111.                     });
  112.                 });

  113.                 $avatarHolderEl.backgroundBlur({
  114.                     imageURL : avatars[0], // URL to the image that will be used for blurring
  115.                     blurAmount : 50, // Amount of blur (higher amount degrades browser performance)
  116.                     imageClass : 'avatar-blur' // CSS class that will be applied to the image and to the SVG element,
  117.                 });

  118.                 // Avatar - based backgrounds
  119.                 $tintedEl.each(function(){
  120.                     var $el = $(this);
  121.                     var avatarImage = $el.attr('src');
  122.                     $el.click(function(e){
  123.                         e.preventDefault();
  124.                         $tintedHolderEl.backgroundBlur(avatarImage);
  125.                     });
  126.                 });

  127.                 $tintedHolderEl.backgroundBlur({
  128.                     imageURL : images[0], // URL to the image that will be used for blurring
  129.                     blurAmount : 10, // Amount of blur (higher amount degrades browser performance)
  130.                     imageClass : 'tinted-bg-blur', // CSS class that will be applied to the image and to the SVG element,
  131.                     overlayClass : 'tinted-bg-overlay', // CSS class of an element that will overlay the blur background (useful for additional effects or putting a spinner)
  132.                     duration: 1000, // If the image needs to be faded in, how long that should take
  133.                     endOpacity : 1 // Specify the final opacity that the image will have
  134.                 });

  135.             });
  136.         </script>
  137. </body>
  138. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则