jQuery第三十一天练习

　　htmlheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0styletypetextcss｛padding：0；margin：0；｝body｛fontsize：12background：000；fontfamily：宋体；｝ul｛liststyletype：｝a｛color：textdecoration：｝。container｛width：1024height：1000background：url（imagessl05。PNG）margin：0paddingtop：100｝。menu｛height：30lineheight：30background：url（imagesbg4。png）｝。menuli｛float：position：｝。menulia：hover｛color：000；background：url（imagesbg4。png）；｝。menuli。focusa｛background：url（imagesbgfocus。png）；｝。menulia｛display：float：height：30lineheight：30padding：020｝。menuliul｛position：left：0；background：url（imagesbg5。png）；width：150border：1pxsolid000；display：｝。menuliula｛width：110｝。one｛border：1pxsolid000；top：30｝。onelia：hover｛background：url（imagesbg4。png）；｝。menuliul。two｛left：150｝。onelia。more｛background：url（imagesarrow。png）norepeat130｝。onelia。more：hover｛background：url（imagesarrow。png）norepeat130｝。menuliul。hdw｛left：150｝。menuliul。hdwq｛left：150｝styleheadbodyulclassmenuli菜单一ulclassoneli菜单一lili菜单二lili菜单三lili菜单四lili菜单五ulclasstwoli菜单一lili菜单二lili菜单三lili菜单四lili菜单五ulclasshdwli菜单一lili菜单二lili菜单三lili菜单四lili菜单五ulclasshdwqli菜单一lili菜单二lili菜单三lili菜单四lili菜单五liulliulliulliullili菜单二ulclassoneli菜单一lili菜单二lili菜单三ulclasstwoli菜单一lili菜单二lili菜单三ulclasshdwli菜单一lili菜单二lili菜单三lili菜单四lili菜单五liullili菜单四liulliullili菜单三lili菜单四lili菜单五ulclassoneli菜单一lili菜单二lili菜单三liulliulbodyhtml
　　DDbelatedPNG。jsDDbelatedPNG：AddsIE6support：PNGimagesforCSSbackgroundimageandHTMLIMG。Author：DrewDillerEmail：drew。dillergmail。comURL：http：www。dillerdesign。comexperimentDDbelatedPNGVersion：0。0。8aLicensedundertheMITLicense：http：dillerdesign。comexperimentDDbelatedPNGlicenseExampleusage：DDbelatedPNG。fix（。pngbg）；argumentisaCSSselectorDDbelatedPNG。fixPng（someNode）；argumentisanHTMLDomElementPLEASEREAD：AbsolutelyeverythinginthisscriptisSILLY。Iknowthis。IEsrenderingofcertainpixelsdoesntmakesense，soneitherdoesthiscode！varDDbelatedPNG｛ns：DDbelatedPNG，imgSize：｛｝，delay：10，nodesFixed：0，createVmlNameSpace：function（）｛enableVMLif（document。namespaces！document。namespaces〔this。ns〕）｛document。namespaces。add（this。ns，urn：schemasmicrosoftcom：vml）；｝｝，createVmlStyleSheet：function（）｛styleVML，enablebehaviorsJustincaselotsofotherdevelopershaveaddedlotsofotherstylesheetsusingdocument。createStyleSheetandhitthe31limitmark，letsnotusethatmethod！furtherreading：http：msdn。microsoft。comenuslibraryms531194（VS。85）。aspxvarscreenStyleSheet，printStyleSscreenStyleSheetdocument。createElement（style）；screenStyleSheet。setAttribute（media，screen）；document。documentElement。firstChild。insertBefore（screenStyleSheet，document。documentElement。firstChild。firstChild）；if（screenStyleSheet。styleSheet）｛screenStyleSheetscreenStyleSheet。styleSscreenStyleSheet。addRule（this。ns：，｛behavior：url（defaultVML）｝）；screenStyleSheet。addRule（this。ns：shape，position：）；screenStyleSheet。addRule（img。this。nssizeFinder，behavior：border：position：zindex：1；top：10000visibility：）；largenegativetopvalueforavoidingverticalscrollbarsforlargeimages，suggestedbyJamesOBrien，http：www。thanatopsic。orghendrikthis。screenStyleSheetscreenStyleSAddaprintmediastylesheet，forpreventingVMLartifactsfromshowingupinprint（includingpreview）。ThankstoRmiPrvostforautomatingthis！printStyleSheetdocument。createElement（style）；printStyleSheet。setAttribute（media，print）；document。documentElement。firstChild。insertBefore（printStyleSheet，document。documentElement。firstChild。firstChild）；printStyleSheetprintStyleSheet。styleSprintStyleSheet。addRule（this。ns：，｛display：none！｝）；printStyleSheet。addRule（img。this。nssizeFinder，｛display：none！｝）；｝｝，readPropertyChange：function（）｛varel，display，v；elevent。srcEif（！el。vmlInitiated）｛｝if（event。propertyName。search（background）！1event。propertyName。search（border）！1）｛DDbelatedPNG。applyVML（el）；｝if（event。propertyNamestyle。display）｛display（el。currentStyle。displaynone）？none：for（vinel。vml）｛if（el。vml。hasOwnProperty（v））｛el。vml〔v〕。shape。style。｝｝｝if（event。propertyName。search（filter）！1）｛DDbelatedPNG。vmlOpacity（el）；｝｝，vmlOpacity：function（el）｛if（el。currentStyle。filter。search（lpha）！1）｛vartransel。currentStyle。transparseInt（trans。substring（trans。lastIndexOf（）1，trans。lastIndexOf（））），10）100；el。vml。color。shape。style。filterel。currentStyle。completeguessworkel。vml。image。fill。completeguesswork｝｝，handlePseudoHover：function（el）｛setTimeout（function（）｛wouldntworkasintendedwithoutsetTimeoutDDbelatedPNG。applyVML（el）；｝，1）；｝，Thisisthemethodtouseinadocument。param｛String｝selectorREQUIREDaCSSselector，suchasdoc。containerfix：function（selector）｛if（this。screenStyleSheet）｛varselectors，i；selectorsselector。split（，）；multipleselectorssupported，noneedformultiplecallstothisanymorefor（i0；iselectors。i）｛this。screenStyleSheet。addRule（selectors〔i〕，behavior：expression（DDbelatedPNG。fixPng（this）））；seemstoexecutethefunctionwithoutaddingittothestylesheetinteresting。。。｝｝｝，applyVML：function（el）｛el。runtimeStyle。cssTthis。vmlFill（el）；this。vmlOffsets（el）；this。vmlOpacity（el）；if（el。isImg）｛this。copyImageBorders（el）；｝｝，attachHandlers：function（el）｛varself，handlers，handler，moreForAs，a，h；handlers｛resize：vmlOffsets，move：vmlOffsets｝；if（el。nodeNameA）｛moreForAs｛mouseleave：handlePseudoHover，mouseenter：handlePseudoHover，focus：handlePseudoHover，blur：handlePseudoHover｝；for（ainmoreForAs）｛if（moreForAs。hasOwnProperty（a））｛handlers〔a〕moreForAs〔a〕；｝｝｝for（hinhandlers）｛if（handlers。hasOwnProperty（h））｛handlerfunction（）｛self〔handlers〔h〕〕（el）；｝；el。attachEvent（onh，handler）；｝｝el。attachEvent（onpropertychange，this。readPropertyChange）；｝，giveLayout：function（el）｛el。style。zoom1；if（el。currentStyle。positionstatic）｛el。style。｝｝，copyImageBorders：function（el）｛varstyles，s；styles｛borderStyle：true，borderWidth：true，borderColor：true｝；for（sinstyles）｛if（styles。hasOwnProperty（s））｛el。vml。color。shape。style〔s〕el。currentStyle〔s〕；｝｝｝，vmlFill：function（el）｛if（！el。currentStyle）｛｝else｛varelStyle，noImg，lib，v，img，imgLelStyleel。currentS｝for（vinel。vml）｛if（el。vml。hasOwnProperty（v））｛el。vml〔v〕。shape。style。zIndexelStyle。zI｝｝el。runtimeStyle。backgroundCel。runtimeStyle。backgroundInoIif（elStyle。backgroundImage！noneel。isImg）｛if（！el。isImg）｛el。vmlBgelStyle。backgroundIel。vmlBgel。vmlBg。substr（5，el。vmlBg。lastIndexOf（））5）；｝else｛el。vmlBgel。｝if（！lib。imgSize〔el。vmlBg〕）｛determinesizeofloadedimageimgdocument。createElement（img）；lib。imgSize〔el。vmlBg〕img。classNamelib。nssizeFimg。runtimeStyle。cssTextbehavior：position：left：10000top：10000border：margin：0；padding：0；；makesuretosetbehaviortononetopreventaccidentalmatchingofthehelperelements！imgLoadedfunction（）｛this。widththis。offsetWweirdcachebustingrequirement！this。heightthis。offsetHlib。vmlOffsets（el）；｝；img。attachEvent（onload，imgLoaded）；img。srcel。vmlBg；img。removeAttribute（width）；img。removeAttribute（height）；document。body。insertBefore（img，document。body。firstChild）；｝el。vml。image。fill。srcel。vmlBg；noI｝el。vml。image。fill。on！noIel。vml。image。fill。el。vml。color。shape。style。backgroundColorelStyle。backgroundCel。runtimeStyle。backgroundIel。runtimeStyle。backgroundC｝，IEcantfigureoutwhatdowhentheoffsetLeftandtheclientLeftaddupto1，andtheVMLendsupgettingfuzzy。。。sowehavetopushenlargethingsby1pixelandthenclipofftheexcessvmlOffsets：function（el）｛varthisStyle，size，fudge，makeVisible，bg，bgR，dC，altC，b，c，v；thisStyleel。currentSsize｛W：el。clientWidth1，H：el。clientHeight1，w：this。imgSize〔el。vmlBg〕。width，h：this。imgSize〔el。vmlBg〕。height，L：el。offsetLeft，T：el。offsetTop，bLW：el。clientLeft，bTW：el。clientTop｝；fudge（size。Lsize。bLW1）？1：0；vmlshape，left，top，width，height，originmakeVisiblefunction（vml，l，t，w，h，o）｛vml。coordsizew，h；vml。coordorigino，o；vml。pathm0，0lw，0lw，hl0，vml。style。vml。style。vml。style。vml。style。｝；makeVisible（el。vml。color。shape，（size。L（el。isImg？0：size。bLW）），（size。T（el。isImg？0：size。bTW）），（size。W1），（size。H1），0）；makeVisible（el。vml。image。shape，（size。Lsize。bLW），（size。Tsize。bTW），（size。W），（size。H），1）；bg｛X：0，Y：0｝；if（el。isImg）｛bg。XparseInt（thisStyle。paddingLeft，10）1；bg。YparseInt（thisStyle。paddingTop，10）1；｝else｛for（binbg）｛if（bg。hasOwnProperty（b））｛this。figurePercentage（bg，size，b，thisStyle〔backgroundPositionb〕）；｝｝｝el。vml。image。fill。position（bg。Xsize。W），（bg。Ysize。H）；bgRthisStyle。backgroundRdC｛T：1，R：size。Wfudge，B：size。H，L：1fudge｝；thesearedefaultsforrepeatofanykindaltC｛X：｛b1：L，b2：R，d：W｝，Y：｛b1：T，b2：B，d：H｝｝；if（bgR！repeatel。isImg）｛c｛T：（bg。Y），R：（bg。Xsize。w），B：（bg。Ysize。h），L：（bg。X）｝；thesearedefaultsfornorepeatclipsdowntotheimagelocationif（bgR。search（repeat）！1）｛nowletsreverttodCforrepeatxorrepeatyvbgR。split（repeat）〔1〕。toUpperCase（）；c〔altC〔v〕。b1〕1；c〔altC〔v〕。b2〕size〔altC〔v〕。d〕；｝if（c。Bsize。H）｛c。Bsize。H；｝el。vml。image。shape。style。cliprect（c。Tpx（c。Rfudge）pxc。Bpx（c。Lfudge）px）；｝else｛el。vml。image。shape。style。cliprect（dC。TpxdC。RpxdC。BpxdC。Lpx）；｝｝，figurePercentage：function（bg，size，axis，position）｛varhorizontal，horizontal（axisX）；switch（position）｛caseleft：casetop：bg〔axis〕0；casecenter：bg〔axis〕0。5；caseright：casebottom：bg〔axis〕1；default：if（position。search（）！1）｛bg〔axis〕parseInt（position，10）100；｝else｛｝｝bg〔axis〕Math。ceil（fraction？（（size〔horizontal？W：H〕bg〔axis〕）（size〔horizontal？w：h〕bg〔axis〕））：parseInt（position，10））；if（bg〔axis〕20）｛bg〔axis〕；｝returnbg〔axis〕；｝，fixPng：function（el）｛el。style。varlib，els，nodeStr，v，e；if（el。nodeNameBODYel。nodeNameTDel。nodeNameTR）｛｝el。isIif（el。nodeNameIMG）｛if（el。src。toLowerCase（）。search（。png）！1）｛el。isIel。style。｝else｛｝｝elseif（el。currentStyle。backgroundImage。toLowerCase（）。search（。png）1）｛｝libDDbelatedPNG；el。vml｛color：｛｝，image：｛｝｝；els｛shape：｛｝，fill：｛｝｝；for（vinel。vml）｛if（el。vml。hasOwnProperty（v））｛for（einels）｛if（els。hasOwnProperty（e））｛nodeStrlib。ns：e；el。vml〔v〕〔e〕document。createElement（nodeStr）；｝｝el。vml〔v〕。shape。el。vml〔v〕。shape。appendChild（el。vml〔v〕。fill）；el。parentNode。insertBefore（el。vml〔v〕。shape，el）；｝｝el。vml。image。shape。Dontshowblankwhiteshapeanglewhenwaitingforimagetoload。el。vml。image。fill。Makesimageshowup。el。vml。color。fill。Actuallygoingtoapplyvmlelementsstyle。backgroundColor，sohidethewhiteness。lib。attachHandlers（el）；lib。giveLayout（el）；lib。giveLayout（el。offsetParent）；el。vmlIlib。applyVML（el）；Render！｝｝；try｛document。execCommand（BackgroundImageCache，false，true）；TredoSoftMultipleIEdoesntlikethis，sotry｛｝it｝catch（r）｛｝DDbelatedPNG。createVmlNameSpace（）；DDbelatedPNG。createVmlStyleSheet（）；
　　效果图：