The spirit of service for the people's lofty ideals, recently wrote a jquery analog select effect of the small East, very useful, share under.
You can download the package directly from the resources I upload: The jquery simulation implements the imitation select effect.
First, on the HTML page code
<!doctype html>
Then, on the CSS code@charset "Utf-8"; body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th, td,p{margin:0;padding:0; font-family: "Microsoft Jas Black", Microsoft Yahei, Arial, Helvetica, Sans-serif;} Ol,ul{list-style:none;}. container{padding-top:100px; margin-left:100px;} /*** analog Select**/.select-box {position:relative; float:left; margin-right:8px;}. Select-city. select-header {width:88px; height:36px; border:1px solid #c1c1c1; padding-right:26px; Background:url (im g/arrow.png) No-repeat #f9f9f9; background-position:95px 15px; line-height:36px; text-indent:14px; font-size:16px; Color: #a9a9a9; Cursor:pointer; Overflow:hidden; }.select-city. select-arrow {background-position:95px-9px;}. Select-city. select-content {border-left:1px solid #c1c1c1; border-right:1px solid #c1c1c1; position:absolute; top:38 px left:0; z-index:99; Display:none; Background-color: #f9f9f9; }.select-city. select-content li {width:114px; height:36px; margin:0; border-bottom:1px sOlid #c1c1c1; line-height:36px; text-indent:14px; Background-color: #f9f9f9; font-size:16px; Color: #a9a9a9; Cursor:pointer; }.select-bank. select-header {width:272px; height:36px; border:1px solid #c1c1c1; padding-right:26px; background:url (img/arrow.png) No-repeat #f9f9f9; BACKGROUND-POSITION:279PX 15px; line-height:36px; text-indent:14px; font-size:16px; Color: #a9a9a9; Cursor:pointer; Overflow:hidden; }.select-bank. select-arrow {background-position:279px-9px;}. Select-bank. select-content {border-left:1px solid #c1c1c1; border-right:1px solid #c1c1c1; position:absolute; top:38 px left:0; z-index:99; Display:none; Background-color: #f9f9f9; }.select-bank. select-content li {width:298px; height:36px; margin:0; border-bottom:1px solid #c1c1c1; line-height:3 6px; text-indent:14px; Background-color: #f9f9f9; font-size:16px; Color: #a9a9a9; Cursor:pointer; }
Finally, on the JS code:$ (function () {/** * simulates select **/$ (". Select-header"). Click (function () {$ (this). Parent (). Siblings (". Select -box "). Find (". Select-content "). Slideup (" fast "); if ($ (this). Siblings (". Select-content"). Was (": Hidden")) {$ (this). addclass ("Select-arrow"); $ (this). Siblings (". Select-content"). Slidedown ("fast"); var evt = new Object; if (typeof (window.event) = = "undefined") {//if Firefox is evt = arguments.callee.caller.arguments[0]; }else{evt = Event | | window.event; } evt.cancelbubble = true; }else{$ (this). Removeclass ("Select-arrow"); $ (this). Siblings (". Select-content"). Slideup ("fast");//Remove event bubbling var evt = new Object; if (typeof (window.event) = = "undefined") {//if Firefox is evt = arguments.callee.caller.arguments[0]; }else{evt = Event | | window.event; } evt.cancelBubble = true; }}); $ (document). Click (function () {$ (". Select-header"). Removeclass ("Select-arrow"); $ (". Select-content"). Slideup ("fast"); }); $ (". Select-content li"). On ("click", Function () {$ (). Parent (). Siblings (". Select-header"). Removeclass (" Select-arrow "); $ (this). The parent (). Siblings (". Select-header"). Text ($ (this). Text ()). End (). Slideup ("fast"); }); $ (". Select-content li"). Hover (function () {$ (this). CSS ("Background-color", "#cfcfcf"); },function () {$ (this). CSS ("Background-color", "#fff"); });});
The effect is as follows:
Have any communication and advice, can add me qq:1740437
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
jquery simulation implements a copy-select effect