Jquery icon effect plugin

The original uses CSS3 implementation address: http://webdesignerwall.com/demo/css3-image-styles/

Some friends in the garden introduced the period: http://www.cnblogs.com/softlover/archive/2012/11/22/2779876.html

Here I will make these effects into a small JQUERY plug-in, and the code is relatively simple

 

(Function ($) {/*** Crazy talent 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">  </a> <a data-role =" none "href =" # loginPage ">  </a> <a data-role =" none "href =" # loginPage ">  </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; width:' + $ (this ). width () + 'px; height: '+ $ (this ). height () + 'px; "/> ';}). after (title); expires (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">  </a> <a data-role =" none "href =" # loginPage ">  </a> <a data-role =" none "href =" # loginPage ">  </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);}

See the connected website.

It's easy to use it !!!