<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> sensor Mouse's picture mask animation effect </title> < Meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <style type= "text/css" > HTML, Body, Div, UL, Li {margin:0; padding:0; } div.examples_body {width:750px; margin:0px Auto; Clear:both; Overflow:hidden; }. bannerholder {width:726px; margin:20px 0 15px 0; padding:20px 10px 20px 10px; Background-color: #f7f7f7; border:1px solid #eee; Overflow:hidden; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; }. bannerholder Li {list-style:none; Display:inline; }. banner {position:relative; width:125px; height:100px; Overflow:hidden; Float:left; Display:inline; margin:0 10px}. Banner img {display:block; Border:none; }. Banner Div {Position:absoluTe z-index:100; Background-color: #222; width:60px; height:60px; Cursor:pointer; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; }. Banner. cornertl {left:-63px; top:-63px; }. Banner. cornertr {right:-63px; top:-63px; }. Banner. cornerbl {left:-63px; bottom:-63px; }. Banner. cornerbr {right:-63px; bottom:-63px; }. banner P {display:none; left:0; top:57px; width:100%; z-index:200; Position:absolute; Font-family:tahoma, Arial, Helvetica, Sans-serif; Color: #FFF; font-size:11px; Text-align:center; Cursor:pointer; } </style> <script type= "Text/javascript" src= "Http://www.jb51.net/ajaxjs/jquery1.3.2.js" ></script > <script type= "Text/javascript" > $ (document). Ready (function () {$ ('. Banner div '). css (' opacity ', 0.4); $ ('. Banner '). Hover (function () {var el = $ (this); El.find (' div '). Stop (). Animate ({width:200,height:200}, ' Slow ', function () {el.find (' P '). FadeIn (' fast '); }); },function() {var el = $ (this); El.find (' P '). Stop (True,true). Hide (); El.find (' div '). Stop (). Animate ({width:60,height:60}, ' fast '); . Click (function () {window.open (). Find (' a '). attr (' href ')); }); }); </script> </pead> <body> If there is an error in the lower left corner, refresh it. <div class= "Examples_body" > <ul class= "Bannerholder" > <li> <div class= "banner" > <p class= "CompanyInfo" >visit the best designs</p> <div class= "Cornertl" ></div> <div class= "Cornertr" ></div> <div class= "CORNERBL" ></div> <div class= "CORNERBR" ></div> </div> < /li> <li> <div class= "banner" > <p class= "CompanyInfo" >visit the best designs</p> <div class= "Cornertl" ></div> <div class= "Cornertr" ></div> <div class= "CORNERBL" ></div> <div class= "CORNERBR" ></div> </div> </li> <li> <div class= "banner" > <p class = "CompanyiNFO ">visit the best designs</p> <div class=" Cornertl "></div> <div class=" CORNERTR "></ div> <div class= "CORNERBL" ></div> <div class= "CORNERBR" ></div> </div> </li> &L t;li> <div class= "banner" > <p class= "CompanyInfo" >visit the best designs</p> <div class= "Corn Ertl "></div> <div class=" Cornertr "></div> <div class=" CORNERBL "></div> <div class= "CORNERBR" ></div> </div> </li> <li> <div class= "banner" > <p class= "compan Yinfo ">visit the best designs</p> <div class=" Cornertl "></div> <div class=" CORNERTR "></ div> <div class= "CORNERBL" ></div> <div class= "CORNERBR" ></div> </div> </li> &L t;/ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
