සුමට පසුබිම් වර්ණය වෙනස් කිරීම. පසුබිම් වර්ණය වෙනස් කරන්නේ කෙසේද: jQuery සමඟ ව්‍යාජ පන්තියෙන් පසුව? jquery වර්ණය වෙනස් කරන්න

මෙම පාඩමෙන් අපි යම් වස්තුවක් මත මවුස් කර්සරය ගෙන යාමේ ප්‍රතිඵලයක් ලෙස එහි පසුබිම සුමට ලෙස වෙනස් වන බලපෑම ගැන කතා කරමු.
පළමුව, ඔබ දැනටමත් පුරුදු වී ඇති පරිදි (මෙය ඔබ jQuery පුස්තකාලය භාවිතා කරන පළමු අවස්ථාව නොවේ නම්), අපි jQuery අපගේ වෙබ් අඩවියට සම්බන්ධ කරමු.
jQuery වලට අමතරව, අපට jQuery UI ද අවශ්‍ය වේ.

ඔබ jQuery මූලධර්ම ගැන හුරුපුරුදු නම්, පිටුවේ ප්‍රධාන අන්තර්ගතය පූරණය වීමට පෙර එය පූරණය වන පරිදි ශීර්ෂයේ අපි ඇමතුම් කේතය තැබිය යුතු බව මතක තබා ගත යුතුය, මෙම අවස්ථාවෙහිදී, වර්ණ වෙනස් කිරීමේ සජීවිකරණය. $(ලේඛනය).ready(function() ( // ඔබේ සජීවිකරණ ඇමතුම් කේතය මෙහි දමන්න ));

HTML

මෙන්න html markup සඳහා උදාහරණයක්.

මූලද්‍රව්‍යයක පසුබිම් වර්ණය වෙනස් කිරීම hover / PC Games / Portal 2 මත වර්ණ වෙනස් කිරීමේ සජීවිකරණය ද්වාරය 2

මුල් ද්වාරය දැනටමත් කල්ට් දෙයක් වන අතර එහි කාලය සඳහා අනපේක්ෂිත ය. එය නැවත වරක් පමණක් උසස් තාක්ෂණයන් අභිබවා අදහස්වල ජයග්‍රහණය පිළිබඳ කාල පරික්ෂා කරන ලද නිබන්ධනය සනාථ කරයි.

CSS

අපගේ පිටුව සඳහා CSS මෝස්තර මේ ආකාරයෙන් පෙනේ.

Png); text-align:left; වර්ණය:#333; පළල: 800px; අකුරු ප්රමාණය:14px; font-family:georgia, "time new romances", serif; ආන්තිකය: 0 ස්වයංක්‍රීය; පිරවුම්: 0; ) a(වර්ණ:#333; පෙළ-අලංකරණය: කිසිවක් ) a:අවධානය ( දළ සටහන: කිසිවක් නැත; ) h1 ( අකුරු ප්‍රමාණය: 34px; font-family: verdana, helvetica, arial, sans-serif; අකුරු පරතරය:- 2px; වර්ණය:#394BEA; අකුරු-බර:700; පෑඩිං:20px 0 0; පෙළ-සෙවණ:0 1px 1px #70C5ED; ) h2 (අකුරු ප්‍රමාණය: 24px; අකුරු-පවුල: verdana, helvetica, arial-s serif; වර්ණය:#5C81CB; අකුරු-බර: 400; පෑඩිං: 0 0 10px; පෙළ-සෙවණ: 0 1px 1px #70C5ED; ) h3, h3 a( font-size:14px; font-family:verdana, arialvetica , sans-serif; අකුරු පරතරය:-1px; වර්ණය:#333; අකුරු-බර: 700; පෙළ-පරිවර්තනය: ලොකු අකුර; ආන්තිකය: 0; පිරවුම: 8px 0 8px 0; ) p (වර්ණ:#333; පාවෙන: වම්; රේඛාව-උස:22px; මායිම: 5px; padding: 0 0 10px; ) #කන්ටේනර් (ආන්තිකය: 0; පිරවුම්: 0; ) .කොටු (පසුබිම:#fff; මායිම:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; ) img ( border: 5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width: 100%; .block (වර්ණ:#0066CC; පාවෙන: වම්; පිටාර ගැලීම:සැඟවුණු; තනතුර:ඥාති; පළල: 600px; ) .block h4, .block h4 a(වර්ණ:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform: ලොකු අකුරු; )

JS

class .boxes සහිත DIV මූලද්‍රව්‍යයක් යනු අපට වෙනස් කිරීමට අවශ්‍ය මූලද්‍රව්‍යය, බ්ලොක් එකයි.
අපි ශීර්ෂය තුළ හඳුන්වන කේතය මෙයයි.

$(document).ready(function())( $(".boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ) , ශ්‍රිතය() ($(මෙය).stop().animate((background Color: "#ffffff"), 800); ));)); පසුබිම් වර්ණ පරාමිතීන් වර්ණය සකසා ඇති අතර, 800 අගය සජීවිකරණ වේගය වේ.

පෙළ සහ බොත්තමක් සහිත ස්තරයක් ඇත, ඔබ එය මත ක්ලික් කළ විට, මෙම ස්ථරයේ ඇති අකුරු වල වර්ණය වෙනස් කළ යුතුය.

වර්ණය වෙනස් කරන්න (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("color", "#F00" );)))); #ස්ථරය (දේශසීමා:#CCC 1px solid; line-height:1.5; padding:10px 20px; width:800px; margin-top:20px;) නමුත් සතුට සහ වේදනාව ප්‍රශංසා කරන මිනිසුන්ගේ මෙම වැරදි වැටහීම පැමිණෙන්නේ කොහෙන්දැයි ඔබට වැටහෙනු ඇත. , මම ඔබට සම්පූර්ණ චිත්‍රය හෙළිකර ප්‍රීතිමත් ජීවිතයක ගෘහ නිර්මාණ ශිල්පියා ලෙස හඳුන්වන සත්‍යය සොයාගත් මේ මිනිසා පැවසූ දේ හරියටම පැහැදිලි කරමි. සැබැවින් ම කිසිවකු සැප සම්පත් වූ පමණින් ඒවා ප්‍රතික්ෂේප නොකරන්නේ, හෙළා නොදකින්නේ හෝ වළක්වන්නේ නැත, නමුත් තාර්කිකව සැප සම්පත්වල නියැලීමට නොදන්නා අය මහත් දුක් විඳිති. දුක් විඳීම නිසා පමණක් දුක් විඳීමට කැමති, කැමති හා ආශා කරන කිසිවෙක් නොමැති සේම, සමහර විට දුක් වේදනා සහ වේදනාව සැලකිය යුතු සතුටක් ගෙන දෙන අවස්ථාවන් නිසා නොවේ. සරල උදාහරණයක් භාවිතා කිරීම සඳහා, අපගෙන් කවරෙක් ඕනෑම ආකාරයක වෙහෙසකර ශාරීරික ව්‍යායාමයක යෙදෙන්නේ එයින් යම් ප්‍රයෝජනයක් නොලැබුනේ නම්? එමෙන්ම කිසිඳු කරදරයක් ගෙන නොදෙන සතුටක් සඳහා වෙහෙසෙන කෙනෙකුට හෝ කිසිඳු සතුටක් ගෙන නොදෙන වේදනාවෙන් වැළකී සිටින කෙනෙකුට සාධාරණ ලෙස දොස් පැවරිය හැක්කේ කාටද?

අද අපි ඉගෙන ගනිමු CSS සහ JQuery භාවිතා කර බ්ලොක් එකක වර්ණය සුමට ලෙස වෙනස් කරන්නේ කෙසේද කියා. මෙම ප්ලගිනය සමඟින් ඔබට විශ්මයජනක ලෙස අලංකාර නිර්මාණ ප්රතිඵල ලබා ගත හැකිය. උදාහරණයක් ලෙස, ඔබට සිසිල් මෙනුවක් සෑදිය හැකි අතර එය සැරිසරන විට වර්ණය සුමටව වෙනස් කරයි, මාව විශ්වාස කරන්න, එය ඉතා ලස්සනයි.

JQuery

ආරම්භ කිරීමට, ටැග් අතර සහ ඔබ පහත සඳහන් දෑ තැබිය යුතුය:

ඉන්පසු, නැවතත් ටැග් අතර, අපි මෙම ස්ක්‍රිප්ට් එක පිටපත් කරමු:

$(ලේඛනය).ready(function())( $(".Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500"), 400); ) , ශ්‍රිතය() ($(මෙය).stop().animate((background Color: "#ffffff"), 400);));));

කොහෙද .Box කියන්නේ අපි CSS වල උඩින් ගෙනාපු block class එක.

“#FF4500” - සැරිසරන වර්ණය. 400 - සැරිසරන විට සජීවිකරණ වේගය.

"#ffffff" යනු කර්සරය ඉවතට ගෙන ගිය පසු ආරම්භක වර්ණයයි. 400 - කර්සරය ඉවතට ගෙන යන විට සජීවිකරණ වේගය.

HTML

ඉහත ලියා ඇති පරිදි ඔබ සියල්ල කළ පසු, බ්ලොක් එකේ වර්ණය ක්රමයෙන් වෙනස් වනු ඇත. පිටුවට එවැනි වාරණයක් ඇතුළු කිරීමට, ඔබ නිවැරදි ස්ථානයේ පහත සඳහන් දෑ එකතු කළ යුතුය:

සහ බ්ලොක් එක දිස්වනු ඇත.

වැදගත්

මෙම ප්ලගිනයට වෙනස් කළ හැක්කේ පසුබිම් වර්ණය පමණි. උදාහරණයක් ලෙස, ඔබට එය සබැඳි හෝ පෙළ වෙත ඇමිණීමට නොහැකි වනු ඇත. තවත් ප්ලගිනයක් සබැඳි වල වර්ණය වෙනස් කරයි (මම අනිවාර්යයෙන්ම එය කරන්නේ කෙසේදැයි ඉක්මනින් ලියන්නම්).

ඔබට පිටුවේ ඇති කුට්ටි මගේ මෙන් විවිධ වර්ණ ඇති කිරීමට අවශ්‍ය නම්, ඔබට ටැග් අතර පේළියක ස්ක්‍රිප්ට් කිහිපයක් තැබිය යුතු අතර, ඒ අනුව, වර්ණය අපේක්ෂිත එකට වෙනස් කිරීමට අමතක නොකරන්න. වඩාත්ම වැදගත් දෙය නම් පන්තිය වෙනස් කිරීමයි, උදාහරණයක් ලෙස අපගේ ඉහත උදාහරණයේ - Box පන්තිය, සහ ඊළඟ ස්ක්‍රිප්ට් වෙනත් පන්තියක් සමඟ විය යුතුය, උදාහරණයක් ලෙස Box1, ඉන්පසු Box2 සහ යනාදිය.

එච්චරයි මිත්‍රවරුනි. ඔබට කිසිවක් තේරෙන්නේ නැත්නම්, අදහස් දැක්වීමේදී විමසීමට වග බලා ගන්න. ඔයාව ඉක්මණින්ම මුණගැසෙන්නම්.

කොහොම හරි එක පාටකින් තව පාටකට අකුරු ගලාගෙන එන එකේ ප්‍රයෝගය ලියන්න ඕන කියලා හිතුණ වෙලාවේ මම හිතුවේ නැති විදියට මේක එච්චර සුළුපටු වැඩක් නෙවෙයි කියලා මටම තේරුණා.

ඔබට පිරික්සුම් සලකුණක් තැබිය හැක්කේ Effects Core ප්‍රතිවිරුද්ධව පමණි. අපට අවශ්‍ය jQuery.animate () ක්‍රමය දිගු කරන්නේ මෙම මොඩියුලයයි; ඔබට බාගත කළ එකලස් කිරීම සම්බන්ධ කිරීමට අවශ්‍ය වේ:

ඊට පසු, ඕනෑම පිටු මූලද්‍රව්‍යයක පෙළ, රාමුව හෝ පසුබිමෙහි වර්ණය සජීවිකරණය සඳහා ලබා ගත හැකිය.

පියවර 2. මූලද්‍රව්‍ය සජීවිකරණ අතර ප්‍රමාදය.

දැන් සෑම දෙයක්ම සජීවිකරණය සමඟ පිළිවෙලට ඇති බැවින්, කාර්යය සංකීර්ණ කරන දෙවන අංගයක් ඇත - එකතු කිරීමේ මූලද්රව්යවල සජීවිකරණය අතර ප්රමාදයක් එකතු කිරීම.

අප සතුව අංකිත ලැයිස්තු මූලද්‍රව්‍ය එකතුවක් ඇතැයි කියමු:

Var $ මූලද්රව්ය = $ ("ol > li");

එකතුවේ එක් එක් ඊලඟ මූලද්‍රව්‍යයේ සජීවිකරණය පෙර එකට පසුව යම් ප්‍රමාදයකින් ආරම්භ විය යුතුය.

පහත කේතය භාවිතයෙන් ඔබට අපේක්ෂිත ප්රතිඵලය ලබා ගත හැක:

සඳහා (var i = 0; i

setTimeout() එහි පළමු පරාමිතිය ලෙස වෙනත් ශ්‍රිතයක් ලබා දෙන ශ්‍රිතයක් ගන්නා බව සලකන්න.

මෙය සිදු නොකළහොත්, i යන විචල්‍යය යොමුවෙන් සම්මත වන අතර, ටයිමර් ශ්‍රිතය ක්‍රියාත්මක කිරීමේ වේලාව පැමිණි විට, එහි අවසාන අගය $elements.length ට සමාන වනු ඇත, මන්ද මේ මොහොත වන විට for loop එක අවසන් වී සජීවිකරණය සිදුවනු ඇත. කිසිසේත්ම ක්‍රියාත්මක නොවනු ඇත.

කැදැලි ශ්‍රිතයක් භාවිතා කරමින්, එමඟින් අපි ලූපයේ සෑම පුනරාවර්තනයකදීම i හි අගය පිටපත් කරන්නෙමු, එමඟින් අපි සාක්ෂාත් කර ගනිමු. නිවැරදි මෙහෙයුමසැලසුම් කර ඇත.

නිගමන

ඔබට එවැනි සජීවිකරණයක් භාවිතා කළ හැකිය, උදාහරණයක් ලෙස, සමහර පරාමිති ලැයිස්තුවක ඔබ අවම වශයෙන් එකක්වත් තෝරා ගත යුතු බව පෙන්වීමට හෝ පිටුවේ යම් කොටසකට අවධානය යොමු කිරීමට.