Home > Developer > JavaScript
:
Core code:
Copy codeThe Code is as follows:
<Div class = "blockB" collection = "Y">
<H2> <span> trump card Regular features </span> <Div id = "regular_features" class = "pp">
<Div class = "tabs"> <a class = "on" href = "http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target = "_ blank"> world's most beautiful </a> <a href = "http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target = "_ blank"> wow! Fun </a> <a href = "http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target = "_ blank"> poor world </a> <a href = "http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target = "_ blank"> weekend driving </a> </div>
<Ul>
<Li> <a href = "http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target = "_ blank"> </> <span> <a href = "http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target = "_ blank"> girly noisy selfie </a> </span> </li>
<Li> <a href = "http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target = "_ blank"> </a> <span> <a href = "http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target = "_ blank"> Sugihara apricot, a Japanese shortening beauty </a> </span> </li>
<Li> <a href = "http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target = "_ blank"> </ a> <span> <a href = "http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target = "_ blank"> Black lingerie </a> </span> </li>
<Li> <a href = "http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target = "_ blank"> </ a> <span> <a href = "http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target = "_ blank"> elegant and sexy black girl </a> </span> </li>
</Ul>
</Div>
<Script type = "text/javascript">
JQuery (function (j ){
Var r = j ('# regular_features '),
Btns = r. find ('> div. tabs> '),
El_ani = r. find ('> ul '),
El_pages = el_ani.find ('> li '),
Pages = el_pages.length,
P = 0,
Pw = 219;
Btns. each (function (idx, btn ){
Btn = j (btn );
Btn. mouseenter (function (ev ){
If (idx! = P ){
J (btns [p]). removeClass ('on ');
Btn. addClass ('on ');
P = idx;
El_ani.stop (). animate ({top:-pw * idx}, 300 );
}
Return false;
});
}). Eq (1). mouseenter ();
});
</Script>
</Div>
DEMO code:
<! 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> </title> <style>/* global CSS definition */div, form, ul, ol, li, span, p, dl, dt, dd, img {margin: 0; padding: 0; border: 0;} h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-size: 12px; font-weight: normal;} ul, ol, li {list-style: none} table, td, input, textarea {f Ont-size: 12px }. blockB {margin-bottom: 22px; margin-right: 11px; padding-bottom: 22px; border-bottom: 1px solid # e8eee0; background: url (/upload/201107/20110709230423180 .gif) no-repeat 0 99px ;}. blockB. pp {margin-left: 51px; height: 223px; position: relative; top: 0; overflow: hidden; width: 248px ;}. blockB. tabs {float: left; width: 68px; font-size: 14px; font-weight: 700; line-height: 16px ;}. blockB. tabs a {width: 38px; Padding: 5px 24px 0 6px; height: 36px; display: block; color: # fff; margin-bottom: 12px; background: #639805 url (/upload/201107/20110709230423555 .gif) no-repeat 0-45px; text-decoration: none ;}. blockB. tabs. on {background-position: 0 0; background-color: # ff8c10; cursor: default ;}. blockB ul {width: 130px; float: left; position: relative; top: 0 ;}. blockB li {padding: 4px; background: #639805; height: 211px; overflo W: hidden; width: 120px ;}. blockB li a {color: # fff ;}. blockB li span {display: block; padding-top: 5px; height: 15px; font-size: 12px; text-align: center} h2 {height: 35px; line-height: 33px; margin-bottom: 5px; text-align: right;} h2 span {display: none; float: left; font-weight: bold ;}. pp img {display: block; margin: 0 auto ;}</style> </pead> <body> trump card Regular features is the most beautiful in the world! Fun, poor travel, and world weekend driving <ul> <li> girl proud, double-peak, self-timer </li> <li> Japanese crisp breasts, sugiwon apricot </li> <li> sexy, beautiful, black underwear </li> <li> elegant, sexy, black-and-black girl </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
