jquery 图标效果插件

(function($) { 
    /** 
    * 疯狂秀才 http://hxling.cnblogs.com 
    * style :glossy,circle,card,embossed,soft-embossed,cutout,morphing-glowing,reflection,tape,glossy-reflection,morphing-tinting,feather 
    * width ： image Width 
    * height: image Height 
    * use it: <div id="menus"> 
                <a data-role="none" href="#bookMeetingRoom" data-transition="slide"> <img src="../imgs/meeting.png" title="预订会议室"/></a> 
                <a data-role="none" href="#loginPage"> <img src="../imgs/gear.png" title="会议室管理"/></a> 
                <a data-role="none" href="#loginPage"> <img src="../imgs/contact-list.png" title="排  班"/></a> 
            </div> 
  
            $("#menus").imageStyle({ width: 128, height: 128 }); 
    */
  
  
    $.fn.imageStyle = function(options) { 
        var settings = options || {}; 
        alert(settings.style); 
        settings = $.extend({},$.fn.imageStyle.defaults,settings); 
        alert(settings.style); 
        return this.each(function() { 
            $(this).addClass(settings.style); 
  
            $(this).find('img').load(function() { 
                $(this).width(settings.width).height(settings.height); 
                var title = $(this).attr('title'); 
                $(this).wrap(function() { 
                    return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />'; 
                }).after(title); 
                $(this).css("opacity", "0"); 
            }); 
        }); 
    }; 
  
    $.fn.imageStyle.defaults = { 
        width: 72, 
        height: 72, 
        style: 'glossy'
    }; 
  
  
}(jQuery));

　　HTML：

<div id="menus"> 
               <a data-role="none" href="#bookMeetingRoom" data-transition="slide"> <img src="../imgs/meeting.png" title="预订会议室"/></a> 
               <a data-role="none" href="#loginPage"> <img src="../imgs/gear.png" title="会议室管理"/></a> 
               <a data-role="none" href="#loginPage"> <img src="../imgs/contact-list.png" title="排  班"/></a> 
           </div>

　　CSS:

/************************************************************************************ 
NORMAL 
*************************************************************************************/
.normal img { 
    border: solid 5px #000; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5); 
    -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5); 
    box-shadow: inset 0 1px 5px rgba(0,0,0,.5); 
} 
  
/************************************************************************************ 
CIRCLE 
*************************************************************************************/
.circle .image-wrap { 
    -webkit-border-radius: 50em; 
    -moz-border-radius: 50em; 
    border-radius: 50em; 
} 
  
/************************************************************************************ 
PHOTO 
*************************************************************************************/
.card .image-wrap { 
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); 
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); 
    box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
  
/************************************************************************************ 
EMBOSSED 
*************************************************************************************/
.embossed .image-wrap { 
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); 
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); 
    box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
  
/************************************************************************************ 
SOFT EMBOSSED 
*************************************************************************************/
.soft-embossed .image-wrap { 
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); 
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); 
    box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
  
/************************************************************************************ 
CUTOUT 
*************************************************************************************/
  
.cutout .image-wrap { 
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); 
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); 
    box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); 
    -webkit-border-radius: 30em; 
    -moz-border-radius: 30em; 
    border-radius: 30em; 
} 
  
/************************************************************************************ 
MORPHING + GLOWING 
*************************************************************************************/
  
.morphing-glowing .image-wrap { 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
    transition: 1s; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
.morphing-glowing .image-wrap:hover { 
    -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); 
    -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); 
    box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); 
    -webkit-border-radius: 60em; 
    -moz-border-radius: 60em; 
    border-radius: 60em; 
} 
  
/************************************************************************************ 
GLOSSY 
*************************************************************************************/
  
.glossy .image-wrap { 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); 
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); 
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); 
  
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    border: 1px solid #ccc; 
  
    margin-left: 25px;margin-bottom: 35px; 
} 
  
.glossy .image-wrap:after { 
    position: absolute; 
    content: ' '; 
    width: 100%; 
    height: 50%; 
    top: 0; 
    left: 0; 
  
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
  
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1))); 
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%); 
} 
  
/************************************************************************************ 
REFLECTION 
*************************************************************************************/
.reflection .image-wrap { 
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5); 
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5); 
    box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5); 
    -webkit-transition: .5s; 
    -moz-transition: .5s; 
    transition: .5s; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
.reflection .image-wrap:after { 
    position: absolute; 
    content: ' '; 
    width: 100%; 
    height: 30px; 
    bottom: -31px; 
    left: 0; 
    -webkit-border-top-left-radius: 20px; 
    -webkit-border-top-right-radius: 20px; 
    -moz-border-radius-topleft: 20px; 
    -moz-border-radius-topright: 20px; 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
    background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0))); 
    background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%); 
} 
.reflection .image-wrap:hover { 
    position: relative; 
    top: -8px; 
} 
  
/************************************************************************************ 
GLOSSY + REFLECTION 
*************************************************************************************/
.glossy-reflection { 
    background: #000; 
    padding: 20px 40px 50px; 
    color: #fff; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
.glossy-reflection .image-wrap { 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); 
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); 
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
    transition: 1s; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
.glossy-reflection .image-wrap:before { 
    position: absolute; 
    content: ' '; 
    width: 100%; 
    height: 50%; 
    top: 0; 
    left: 0; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1))); 
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%); 
} 
.glossy-reflection .image-wrap:after { 
    position: absolute; 
    content: ' '; 
    width: 100%; 
    height: 30px; 
    bottom: -31px; 
    left: 0; 
    -webkit-border-top-left-radius: 20px; 
    -webkit-border-top-right-radius: 20px; 
    -moz-border-radius-topleft: 20px; 
    -moz-border-radius-topright: 20px; 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
    background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0))); 
    background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%); 
} 
  
/************************************************************************************ 
TAPE 
*************************************************************************************/
.tape .image-wrap { 
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); 
    box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); 
} 
.tape .image-wrap:after { 
    position: absolute; 
    content: ' '; 
    width: 60px; 
    height: 25px; 
    top: -10px; 
    left: 50%; 
    margin-left: -30px; 
    border: solid 1px rgba(137,130,48,.2); 
    background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6))); 
    background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%); 
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2); 
} 
  
/************************************************************************************ 
MORPHING & TINTING 
*************************************************************************************/
.morphing-tinting .image-wrap { 
    position: relative; 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
    transition: 1s; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
.morphing-tinting .image-wrap:hover { 
    -webkit-border-radius: 30em; 
    -moz-border-radius: 30em; 
    border-radius: 30em; 
} 
.morphing-tinting .image-wrap:after { 
    position: absolute; 
    content: ' '; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
    transition: 1s; 
    -webkit-border-radius: 30em; 
    -moz-border-radius: 30em; 
    border-radius: 30em; 
} 
.morphing-tinting .image-wrap:hover:after  { 
    background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); 
    background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px); 
} 
  
/************************************************************************************ 
FEATHER 
*************************************************************************************/
.feather .image-wrap { 
    position: relative; 
    -webkit-border-radius: 30em; 
    -moz-border-radius: 30em; 
    border-radius: 30em; 
} 
.feather .image-wrap:after  { 
    position: absolute; 
    content: ' '; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1))); 
    background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px); 
}

　效果看连接的网站吧

怎么使用不用说了吧，哈哈，比较简单的！！！

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。