Өнөөдөр бид хэрхэн хийхийг сурах болно css болон jquery ашиглан блокийн өнгөний жигд өөрчлөлт. Энэхүү залгаасын тусламжтайгаар та дизайны гайхалтай үр дүнд хүрч чадна. Жишээлбэл, та гүйлгэхэд өнгийг нь жигд өөрчлөх сэрүүн цэс хийж болно, надад итгээрэй, энэ нь маш сайхан харагдаж байна.

jQuery

Шошгуудын хооронд эхлүүлэхийн тулд болон та дараахь зүйлийг оруулах хэрэгтэй.

Дараа нь дахин шошго хооронд болонЭнэ скриптийг хуулах:

Хаана .хайрцаг-Энэ бол бидний дээр CSS дээр бодож олсон блок анги юм.

"#FF4500» - хулганы өнгө. 400 - хөдөлгөөнт дүрсний хурд.

"#ffffff"- курсорыг арилгасны дараа анхны өнгө. 400 - курсорыг арилгах үед хөдөлгөөнт дүрсний хурд.

HTML

Та дээр дурдсан бүх зүйлийг хийсний дараа, блокны өнгө жигд өөрчлөгдөнө. Хуудас дээр ийм блок оруулахын тулд та дараах зүйлийг зөв газарт нэмэх хэрэгтэй.

Мөн блок гарч ирнэ.

Чухал

Энэ залгаас нь зөвхөн дэвсгэр өнгийг (арын дэвсгэр) өөрчлөх боломжтой. Жишээлбэл, үүнийг холбоос эсвэл текстэнд хавсаргах боломжгүй болно. Холбоосуудын өнгийг өөр залгаас өөрчилсөн (би үүнийг хэрхэн хийх талаар удахгүй бичих болно).

Хэрэв та хуудсан дээрх блокуудыг миний байгаа шиг өөр өнгөтэй болгохыг хүсвэл шошгонуудын хооронд хэрэгтэй болно. болонхэд хэдэн скриптийг дараалан байрлуулж, үүний дагуу өнгийг хүссэн болгон өөрчлөхөө бүү мартаарай. Хамгийн чухал зүйл бол ангиудыг өөрчлөх явдал юм, жишээлбэл, бидний дээрх жишээнд - анги хайрцаг, мөн дараах скрипт зэрэг нь өөр ангитай байх ёстой Хайрцаг1, дараа нь Хайрцаг 2гэх мэт.

Ингээд л болоо, эрхэм найзууд аа. Хэрэв та ямар нэг зүйлийг ойлгохгүй байгаа бол сэтгэгдэл дээр асуухаа мартуузай. Удахгүй уулзацгаая.

Текст болон товчлуур бүхий давхарга байгаа бөгөөд дарахад та энэ давхаргын текстийн өнгийг өөрчлөх хэрэгтэй.

Шинж чанаруудыг динамикаар өөрчлөхийн тулд jQuery нь хөдөлгөөнт функцийг ашигладаг. Энэ нь шинэ утга - шинж чанар, цагийг тохируулах боломжийг олгодог бөгөөд энэ хугацаанд хуучин утгаас өгөгдсөн утга руу жигд хөдөлгөөнт өөрчлөлт гарах болно. Маш хүчирхэг функц! Гэхдээ ердийнх шиг, тосонд ялаа бас байдаг.

Асуудал

Амилалт хийх CSS шинж чанаруудын багц хязгаарлагдмал. Үнэн хэрэгтээ эдгээр нь зөвхөн тоон утгыг авах боломжтой шинж чанарууд юм. Ялангуяа хөдөлгөөнт дүрс нь өнгөөр ​​ажиллах боломжгүй.

Шийдэл

Аз болоход, animate-ийн чадавхийг өргөтгөж, илүү хүчирхэг болгодог залгаас байдаг. jQuery.color-г хайрлаж, хүндэлнэ үү! Үүний тусламжтайгаар та ойлгомжтой CSS шинж чанаруудын жагсаалтад болон нэмэх боломжтой.

Практикт энэ нь дараах байдалтай харагдаж байна.

Баталгаажсан:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3

Юу татаж авах вэ?

• jquery.js (55.9 Kb) - jQuery номын санхувилбар 1.3.2;
• (3.66 Kb).

Хурдан эхлэл

jQuery болон залгаасыг холбоно уу:

Бид CSS-ийн анхны өнгийг тодорхой зааж өгсөн:

Div(арын өнгө:#0CF; )

Одоо бид хөдөлгөөнт функцийг ашиглаж байна, жишээлбэл, хулганыг гүйлгэхэд:

Тэгээд одоо илүү дэлгэрэнгүй

Энэхүү залгаас нь дараах CSS шинж чанаруудтай ажиллах боломжийг танд олгоно.

Жишээ:

Нэмэлт нь:

• класс ашиглах нь зөвхөн хөдөлгөөнт функцээс илүү уян хатан механизмыг өгдөг. Эцсийн эцэст, бид нэгэн зэрэг өөрчлөгдөж буй шинж чанарыг сонгохдоо хязгаарлагдахгүй.

Хасах:

• харин "хүнд" арга - номын сангууд зохистой жинтэй.

Дүгнэлт:

Хэрэв танд "татах" хөдөлгөөнөөс илүү төвөгтэй эффект хэрэгтэй бол та UI багцаас switchClass эффектийг ашиглаж болно. Гэхдээ хэрэв даалгавар нь өнгөний гөлгөр өөрчлөлтөөр хязгаарлагддаг бол илүү хөнгөн jQuery.color залгаасыг ашиглаарай.

jQuery.color миний дуртай хөдөлгөөнт функцийг илүү сайн болгодог. Ямар ч нэмэлт анги, id нэмдэггүй нь надад маш их таалагдсан. Энэ нь зүгээр л хөдөлгөөн хийх олон боломжит сонголтыг өргөжүүлдэг. Сайхан гөлгөр өнгөний өөрчлөлтийг бий болгохын тулд бүгдийг ашигла!

::өмнө ба:: дараа (болон) гэх мэт CSS псевдо-элементүүдийг сонгох/өөрчлөх арга бий юу? хуучин хувилбарнэг цэгтэй таслалтай) jQuery ашиглаж байна уу?

Жишээлбэл, миний загварын хуудас дараах дүрэмтэй байна.

Span :: after( контент: "foo" )

Би jQuery ашиглан "foo"-г "bar" болгож хэрхэн өөрчлөх вэ?

Та мөн псевдо элементийн агуулгыг өгөгдлийн атрибут руу дамжуулж, дараа нь jQuery ашиглан дараах зүйлийг хийж болно.

foo

$("span").hover(function()( $(энэ).attr("өгөгдлийн контент","бар"); ));

Span:after (агуулга: attr(data-content) "таны хүссэн бусад текст"; )

Хэрэв та "бусад текст"-ийг харуулахгүй байхыг хүсвэл үүнийг seucolega-ийн шийдэлтэй дараах байдлаар нэгтгэж болно.

foo

$("span").hover(function()( $(энэ).addClass("өөрчлөх").attr("өгөгдлийн контент","бар"); ));

Span.change:after (агуулга: attr(өгөгдлийн контент) "таны хүссэн бусад текст"; )

Би үүнийг бодит амьдрал дээр ашиглахын тулд бичээгүй, учир нь юунд хүрч болох талаар жишээ өгөхийн тулд энэ нь боломжгүй юм.

Css = ( өмнө нь: function(elem,attr)( if($("#cust_style") !== undefined)( $("body").adpend(""); ) else ( $("#cust_style").remove(); $("body").adpend(""); ) ), дараа: function(elem,attr)( if($("#cust_style") !== undefined)( $("body").adpend(""); ) else ( $("#cust_style").remove(); $("body").adpend(""); } } }

Энэ нэмэлт нь одоогоор Pseudo элементийн дараа зорилтот элементэд нөлөөлөх шаардлагатай шинж чанарыг агуулсан элемент нэмж эсвэл Style элементийг нэмж байна.

үүнийг ингэж ашиглаж болно

Css.after("someElement"," контент: "Тест"; байрлал: "absolute"; ") // засварлах / хэв маяг нэмэх: дараа

css.before(...); // өмнөх псевдо элементэд нөлөөлөх.

Дараа нь: болон өмнө нь: псевдо-элементүүдэд DOM-ээр шууд хандах боломжгүй, одоогоор тодорхой CSS утгыг чөлөөтэй засах боломжгүй байна.

Миний зам бол зүгээр л жишээ байсан бөгөөд энэ нь дадлага хийхэд тохиромжгүй, та үүнийг өөрчилж, өөрийн арга заль мэхийг туршиж үзээд бодит ертөнцөд ашиглах боломжтой болгож болно.

Тиймээс энэ болон бусадтай туршилтыг өөрөө хий!

тавтай морилно уу - Адарш Хэдде.

Бүгдэнд нь баярлалаа! би хүссэнээ хийж чадсан :D http://jsfiddle.net/Tfc9j/42/Энд харах

Би гаднах div-ийн тунгалаг байдлыг дотоод div-ийн тунгалаг байдлаас өөр болгохыг хүссэн бөгөөд энэ нь өөр газар дарж өөрчилнө ;) Баярлалаа!

$("#ena").on("товшилт", функц () ( $("толгой").append(""); )); $("#duop").on("товшилт", функц (e) ( $("толгой"). хавсаргах(""); e.stopPropagation(); )); #ena(өргөн:300px; өндөр:300px; хүрээ:1px хар хатуу; байрлал:харьцангуй; ) #duo( тунгалаг байдал:1; байрлал: үнэмлэхүй; дээд: 50px; өргөн :300px; өндөр: 100px; дэвсгэр өнгө: цагаан; ) #ena:before (агуулга: attr(өгөгдлийн өмнө); өнгө: цагаан; курсор: заагч; байрлал: үнэмлэхүй; дэвсгэр өнгө: улаан; тунгалаг байдал: 0.9; өргөн: 100%; өндөр: 100%; )

Та хуурамч өмч үүсгэх, эсвэл байгаа өмчийг ашиглаж, түүнийг псевдо элементийн загварын хүснэгтэд өвлөн авах боломжтой.

var switched = худал; // Өнгө солих тохиргоог идэвхжүүлэх "s css // өв залгамжлал ашиглаж байна. element.style.borderLeftColor = өнгө; шилжүүлсэн = !шилжсэн; ), 1000); .arrow ( /* SET FICTIONAL PROPERTY */ border-left-color:red; background-color:red; өргөн:1эм; өндөр:1эм; дэлгэц:доторх блок; байрлал:харьцангуй; ) .сум:дараа ( хүрээ-дээд:1эм хатуу тунгалаг; хилийн-баруун:1эм бүрэн тунгалаг; хүрээ-доод:1эмцэвт тунгалаг; хүрээ- зүүн:1эм хатуу тунгалаг; /* ӨМЧИЙН ӨВЛӨГДӨХ */ border-left-color:өвлөх; агуулга:""; өргөн:0; өндөр:0; байрлал: үнэмлэхүй; зүүн:100%; дээд:-50%; )

Энэ нь агуулгын өмчид тохирохгүй юм шиг байна :(

Та jQuery дахь псевдо элементүүдийг сонгох боломжгүй, учир нь тэдгээр нь DOM-ийн нэг хэсэг биш юм. Гэхдээ та үндсэн элементэд тодорхой анги нэмж, түүний псевдо-элементүүдийг CSS дээр удирдаж болно.

Span.change:дараа (агуулга: "бар" )

Хэдийгээр тэдгээрийг CSS-ээр дамжуулан хөтчүүд бусад бодиттой төстэй юм шиг харуулдаг DOM элементүүд, псевдо-элементүүд нь өөрсдөө DOM-ийн нэг хэсэг биш, учир нь псевдо-элементүүд нь нэрнээс нь харахад бодит элемент биш тул та jQuery-ээр шууд сонгож, удирдах боломжгүй. ямар ч JavaScript API, хэрэв тийм биш бол Сонгогч API). Энэ нь зөвхөн ::before болон ::after биш, скриптээр загварчлахыг оролддог аливаа псевдо-элементүүдэд хамаарна.

Та .css()-ын гадна jQuery-д өртдөггүй CSSOM (think window.getComputedStyle() )-аар дамжуулан зөвхөн псевдо элементийн хэв маягийг ажиллах үед шууд авах боломжтой бөгөөд энэ нь псевдо элементүүдийг дэмждэггүй арга юм.

Та үүнийг тойрон гарах өөр арга замыг үргэлж хайж олох боломжтой, гэхдээ жишээ нь:

нэг нь ажилладаг, гэхдээ тийм ч их биш үр дүнтэй арга- шинэ агуулга бүхий баримт бичигт дүрэм нэмж, ангиллаар нь иш татна. юу хэрэгтэй байгаагаас хамааран анги нь агуулгын утга тус бүрийн хувьд өвөрмөц танигчийг шаардаж болно.

$("").appendTo($("толгой")); $("span").addClass("id-дараа");

Би энэ асуултанд аль хэдийн хариулсан, гэхдээ зүгээр л гайхалтай байхын тулд би үүнийг танд дахин хэлэх болно.

Хариулт нь байх ёстой Тийм & Үгүй. Та псевдо сонгогчтой элемент сонгох боломжгүй, гэхдээ javascript ашиглан загварын хүснэгтэд шинэ дүрэм нэмж болно.

Би танд тохирох зүйл хийсэн:

Var addRule = функц(хуудас, сонгогч, хэв маяг) (хэрэв (sheet.insertRule) хуудас.insertRule(сонгогч + " (" + хэв маяг + ")", sheet.cssRules.length); хэрэв (sheet.addRule) хуудас буцаана .addRule(сонгогч, загвар); ); addRule(document.styleSheets, "бие: дараа", "агуулга: "foo"");

"Өмнө нь"-ийн тооцоолсон загвар нь дараах агуулгатай байсан: "ВЕРIFY TO WATCH";

Энэ элементийг тусгайлан заадаг нэмэлт анги нэмж, дараа нь өөрчлөхийн тулд загварын шошго (чухал шошготой) нэмэх санааг ашигласан jQuery-ийн хоёр мөр энд байна. CSS утгууд sudo элементийн агуулга:

$("span.play:eq(0)").addClass("G");

$("body").adpend("");

Та зүгээр л толгой дээрээ хэв маяг нэмэх боломжтой байхад яагаад анги эсвэл шинж чанаруудыг нэмэх хэрэгтэй вэ?

$("толгой"). нэмэх("")

Энд маш олон хариулт байгаа боловч ямар ч хариулт css:befor or :after-ийг удирдахад тусалдаггүй, тэр ч байтугай хүлээн зөвшөөрөгдсөн хариулт ч биш.

Би үүнийг хэрхэн хийхийг санал болгож байна. Таны HTML дараах байдалтай байна гэж бодъё.

Дараа нь та үүнийг CSS-д өмнө нь тохируулаад дараах байдлаар загварчлаарай:

#ямар нэгэн зүйл:өмнө( контент:"1-р"; үсгийн хэмжээ:20px; өнгө:улаан; ) #ямар нэгэн зүйл( контент:"1-р"; )

Би мөн агуулгыг элемент дээр тохируулсан гэдгийг анхаарна уу, ингэснээр та дараа нь амархан гаргаж авах боломжтой. Одоо та өнгийг ногоон болгож, үсгийн хэмжээг 30px болгож өөрчлөхийг хүссэн товчлуур дээр дарна уу. Та үүнд дараах байдлаар хүрч чадна:

Зарим .activeS ангид css-г шаардлагатай загвараар тодорхойл:

Идэвхтэй: өмнө( өнгө: ногоон ! чухал; үсгийн хэмжээ: 30 пиксел ! чухал; )

Одоо та :before-ийн хэв маягийг дараах байдлаар :befor элемент дээрээ анги нэмж өөрчилж болно:

өөрчлөх

Хэрэв та контентыг авахыг хүсвэл: өмнө нь дараах байдлаар хийж болно:

Агуулга авах

Эцсийн эцэст, хэрэв та jQuery-ийн өмнө :-ын агуулгыг динамикаар өөрчлөхийг хүсвэл дараах байдлаар хүрч болно:

өөрчлөх

"Өмнө нь өөрчлөх" товчийг дарснаар #something-ийн :before агуулгыг "22" болгож өөрчлөх бөгөөд энэ нь динамик утга юм.

Энэ тусална гэж найдаж байна

CSS-д тодорхойлсон :after болон :before загварын шинж чанаруудад хандах арга энд байна:

// .element:before var color = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("өнгө") -ийн өнгөний утгыг авах; // .element:before var content = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("content");

$(".span").attr("data-txt", "foo"); $(".span").click(функц () ( $(энэ).attr("data-txt","бусад текст"); )) .span( ) .span:after( контент: attr(өгөгдөл" -txt);)

Бид ч бас найдаж болно захиалгат CSS шинж чанарууд (хувьсагч)псевдо элементийг удирдах. Бид уншиж болно техникийн үзүүлэлтүүд, юу:

Захиалгат шинж чанарууд нь ердийн шинж чанарууд тул тэдгээрийг дурын элемент дээр зарлах, ердийн удамшил, шаталсан дүрмээр зөвшөөрөгдөх, @media болон бусад нөхцөлт дүрмүүд дээр байх, HTML загварын шинж чанарт ашиглах, CSSOM ашиглан унших эсвэл тохируулах боломжтой, гэх мэт d.

Үүнийг бодолцон элемент доторх захиалгат шинж чанарыг тодорхойлох санаа нь псевдо элемент нь түүнээс өвлөгддөг; Тиймээс бид үүнийг хялбархан өөрчилж чадна:

1) Дотор хэв маягийг ашиглах:

Box:befor (агуулга:"Би бол өмнөх элемент"; өнгө:var(--өнгө, улаан); үсгийн хэмжээ:25px; )

2) CSS болон Classes ашиглах

Хайрцаг:өмнө ( агуулга:"Би өмнөх элемент"; өнгө:var(--өнгө, улаан); үсгийн хэмжээ:25px; ) .цэнхэр ( --өнгө:хөх; ) .хар ( --өнгө:хар ;)

3) JavaScript ашиглах

document.querySelectorAll(".box").style.setProperty("--өнгө", "цэнхэр"); document.querySelectorAll(".box").style.setProperty("--color", "#f0f"); .box:befor (агуулга:"Би өмнөх элемент"; өнгө:var(--өнгө, улаан); үсгийн хэмжээ:25px; )

4) jQuery ашиглах

$(".box").eq(0).css("--өнгө", "цэнхэр"); /* Захиалгат шинж чанартай css() функц нь зөвхөн jQuery хувилбар дээр ажилладаг >= 3.x хуучин хувилбартай бид утгыг тохируулахдаа style шинж чанарыг ашиглаж болно. Хэрэв та аль хэдийн шугаман хэв маягийг тодорхойлсон бол анхаарлаа хандуулаарай! */ $(".box").eq(1).attr("хэв маяг","--өнгө:#f0f"); .box:befor (агуулга:"Би өмнөх элемент"; өнгө:var(--өнгө, улаан); үсгийн хэмжээ:25px; )

Үүнийг мөн нарийн төвөгтэй утгуудад ашиглаж болно:

Хайрцаг ( --c:"content"; --b:шугаман-градиент(улаан,цэнхэр); --s:20px; --p:0 15px; ) .box:befor (агуулга: var(--c) ; дэвсгэр:var(--b); өнгө:#fff; үсгийн хэмжээ: calc(2 * var(--s) + 5px); дэвсгэр:var(--p); )

Хэрэв та CSS-ээр дамжуулан sudo бүхий ::befor or ::after элементүүдийг бүрэн хянахыг хүсвэл JS ашиглан хийж болно. Доор үзнэ үү:

jQuery("толгой").adpend("");

элемент гэдгийг анхаарна уу