娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇渚︽帰鍦ㄥ伐浣滀腑閫氬父浼氬湪寰堝鍦哄悎浣跨敤瀹氭椂鍣紝姣斿寤惰繜鍔犺浇锛屽畾鏃舵煡璇㈢瓑锛屼絾鏄瀹氭椂鍣ㄧ殑鎺у埗鏈夋椂鏄湁鐐归夯鐑︼紝姣斿鎶婇紶鏍囩Щ杩涘幓鍋滄锛岀Щ鍑烘潵閲嶆柊寮€濮嬨€傝繖娆℃垜灏嗕粙缁嶅嚑绉嶅€熷姪CSS鏇村ソ鍦版帶鍒跺畾鏃跺櫒鐨勬柟娉曘€傝鎴戜滑涓€璧蜂簡瑙ｅ畠銆傜浉淇¤兘甯︽潵涓嶄竴鏍风殑浣撻獙銆?.hoverdelaytrigger鏈夎繖涔堜竴涓満鏅紝榧犳爣鍦ㄦ煇涓厓绱犱笂鍋滅暀1s鍚庢墠瑙﹀彂浜嬩欢锛屽皬浜?s鍒欎笉浼氳Е鍙戙€傝繖鏍峰仛鐨勫ソ澶勬槸鍙互閬垮厤榧犳爣蹇€熷垝杩囨椂棰戠箒瑙﹀彂浜嬩欢銆傚鏋滅敤js瀹炵幇锛屽彲鑳芥槸杩欐牱vartimer=nullel.addEventListener('mouseover',()=>{timer&&clearTimeout(timer)timer=setTimeout(()=>{//鍏蜂綋閫昏緫},1000)})鏄繖鏍峰悧锛熺瓑绛夛紝杩欒繕娌″畬锛岃繖鍙槸瀹炵幇浜嗕竴涓欢鏃讹紝榧犳爣绂诲紑鍚庤繕鏄細瑙﹀彂锛岄紶鏍囩寮€鏃堕渶瑕佸彇娑堝畾鏃跺櫒el.addEventListener('mouseout',()=>{timer&&clearTimeout(timer)})鍙﹀锛屽湪浣跨敤mouseout鐨勬椂鍊欙紝杩橀渶瑕佽€冭檻dom鐨勫祵濂楃粨鏋勶紝鍥犱负杩欎簺浜嬩欢杩樻槸浼氬湪parent->child鐨勮繃绋嬩腑琚Е鍙戙€傛€讳箣锛岀粏鑺備細寰堝锛屽鏄撹瑙﹀彂銆傜幇鍦ㄨ浆鎶樼偣鏉ヤ簡銆傚鏋滃€熺敤CSS锛屽氨鍙互鏈夋晥閬垮厤浠ヤ笂闂銆傚涓嬶紝鍏堢粰闇€瑕佽Е鍙戠殑鍏冪礌娣诲姞涓€涓湁寤舵椂鐨勮繃娓℃寜閽細hover{opacity:0.999;/*涓嶇浉鍏崇殑鏍峰紡*/transition:0s1sopacity;/*Delay1s*/}杩欓噷鍙渶瑕佷竴涓笉鐩稿叧鐨勬牱寮忋€傚鏋渙pacity宸茬粡鐢ㄨ繃浜嗭紝鍙互鐢ㄥ叾浠栫殑锛屾瘮濡倀ransform:translateZ(.1px)锛屼篃鏄彲琛岀殑銆傜劧鍚庢坊鍔犵洃鍚櫒transitionend鏂规硶GlobalEventHandlers.ontransitionend-WebAPIInterfaceReference|MDN(mozilla.org)el.addEventListener('transitionend',()=>{//鍏蜂綋閫昏緫})鍒版缁撴潫銆傛棤瀹氭椂鍣紝鏃犲彇娑堬紝鏃犻渶鑰冭檻dom缁撴瀯锛屽畬缇庡疄鐜般€備笅闈㈡槸涓€涓皬渚嬪瓙銆傛偓鍋滀竴娈垫椂闂村悗瑙﹀彂鍛婅鐨勫師鐞嗗悓涓娿€傚畬鏁翠唬鐮佸彲浠ユ煡鐪嬪湪绾縟emo锛歨over_alert(runjs.work)馃濡傛灉浠ュ悗閬囧埌杩欐牱鐨勯渶姹傦紝鍙互鍋滀笅鏉ユ兂涓€鎯炽€傜浉鍏充氦浜掑彲浠ラ€氳繃杩欑鏂瑰紡瀹炵幇銆?銆侀暱鎸夎Е鍙戜簨浠堕暱鎸変篃鏄瘮杈冨父瑙佺殑闇€姹傦紝鍙互寰堝ソ鐨勫拰鐐瑰嚮浜嬩欢鍖哄垎寮€鏉ワ紝浠庤€岃祴浜堟洿澶氱殑浜や簰鑳藉姏銆備絾鏄師鐢焜s涓槸娌℃湁杩欎釜浜嬩欢鐨勩€傚鏋滆瀹炵幇闀挎寜浜嬩欢锛岄€氬父闇€瑕佺敤鍒板畾鏃跺櫒鍜岄紶鏍囨寜涓嬩簨浠讹紝濡備笅el.onmousedown=function(){this.timer&&clearTimeout(this.timer);杩欍€倀imer=settimeout(function(){//涓氬姟浠ｇ爜},1000)}el.onmouseup=function(){this.timer&&clearTimeout(this.timer);}鍙堟槸瀹氭椂鍣ㄥ拰鍙栨秷瀹氭椂鍣ㄧ殑鍦烘櫙锛屽墠闈㈢殑涓€涓緥瀛愭湁鐐圭被浼硷紝涔熷彲浠ュ€熷姪CSS鏉ュ疄鐜般€傛棦鐒舵槸榧犳爣鎸変笅锛屽彲浠ュ叧鑱?active锛屾墍浠ュ彲浠ュ疄鐜癰utton:hover:active{opacity:.999;/*涓嶇浉鍏崇殑鏍峰紡*/transition:opacity1s;/*寤惰繜1s*/}鐒跺悗鐩戝惉transitionend鏂规硶el.addEventListener('transitionend',()=>{//鍏蜂綋閫昏緫})鏄笉鏄緢鏂逛究锛熶笅闈㈡槸涔嬪墠鍋氳繃鐨勪竴涓皬妗堜緥銆傚疄鐜伴暱鎸夎Е鍙戝厓绱犻€夋嫨瀹屾暣浠ｇ爜鏌ョ湅鍦ㄧ嚎demo锛氶暱鎸夋柟妗嗛€夋嫨(runjs.work)3.杞挱鍜屾殏鍋滃啀鏉ョ湅涓€涓瘮杈冩湁鎰忔€濈殑渚嬪瓙锛岃疆鎾浘銆傞€氬父杞挱浼氳嚜鍔ㄦ挱鏀撅紝褰撻紶鏍囨偓鍋滄椂杞挱浼氭殏鍋溿€傞€氬父鐨勬柟娉曟槸杩欎釜鍑芥暟autoPlay(){timer&&clearInterval(timer)timer=setInterval(function(){//carousellogic},1000)}autoPlay()view.onmouseover=function(){timer&&clearInterval(timer)}el.onmouseout=function(){autoPlay()}鍙堟槸瀹氭椂鍣ㄧ殑鍙栨秷鍜岃缃紝杩樿缁戝畾涓€鍫嗕簨浠讹紝鐑︽浜嗭紝鑳戒笉鑳芥敼涓€涓嬶紵褰撶劧鍙互锛屽浜忎簡CSS鍔ㄧ敾锛屼竴鍒囬兘寰堝鏄撳鐞嗐€傚拰涓婁竴涓笉鍚岀殑鏄紝杩欓噷鏄痵etInterval锛屽彲浠ラ噸澶嶈Е鍙戯紝閭ｄ箞css涓湁浠€涔堝彲浠ラ噸澶嶈Е鍙戠殑鍛紵娌￠敊锛孋SS鍔ㄧ敾锛佸綋CSS鍔ㄧ敾璁剧疆涓篿nfinite鏃讹紝鍙互鏃犻檺寰幆锛屽拰杩欎釜timer鏁堟灉寰堝儚锛屽彲浠ョ洿鎺ラ€氳繃:hover鏆傚仠鍜屾挱鏀惧姩鐢汇€傚彲浠ヤ娇鐢╝nimationiteration鏂规硶鏉ョ洃鍚瘡涓姩鐢荤殑瑙﹀彂锛屼篃灏辨槸璇存瘡涓姩鐢诲惊鐜兘浼氳Е鍙戜竴涓狦lobalEventHandlers.onanimationiteration-WebAPIInterfaceReference|MDN(mozilla.org)鎵€浠ヨ繖绉嶆€濊矾灏辨槸.view{animation:scroll1sinfinite;/*姣?s鍔ㄧ敾涓€娆★紝鏃犻檺寰幆*/}.view:hover{animation-play-state:paused;/*鎮仠鏆傚仠*/}@keyframesscroll{to{transform:translateZ(.1px);/*鏃犳墍璋撴牱寮?/}}鐒跺悗鐩戝惉animationiteration浜嬩欢view.addEventListener("animationiteration",()=>{//Carousellogic})鏄笉鏄渷浜嗗ぇ閮ㄥ垎js浠ｇ爜锛熷畠涔熸洿瀹规槗鐞嗚В鍜屾帶鍒躲€備笅闈㈡槸鐢╝nimationiteration浠ｆ浛setInterval瀹炵幇鐨勮疆鎾浘銆傚畬鏁寸殑浠ｇ爜鍙互鐪嬪湪绾縟emo锛歝ss_banner(runjs.work)4.缁间笂鎵€杩帮紝浠ヤ笂灏辨槸鍑犵鍙兘涓嶉渶瑕佸畾鏃跺櫒鐨勬柟妗堛€備笌瀹氭椂鍣ㄧ浉姣旓紝鎹㈠彞璇濊锛孋SS鍦ㄦ帶鍒跺畾鏃跺櫒鐨勫紑鍚拰鏆傚仠鏂归潰鏇存湁浼樺娍銆傛垜浠€荤粨濡備笅锛歨over閰嶅悎transitiondelay鍜宼ransitionend鐩戝惉瀹炵幇榧犳爣寤惰繜瑙﹀彂鏁堟灉锛歛ctive閰嶅悎transitiondelay鍜宼ransitionend鐩戝惉瀹炵幇闀挎寜瑙﹀彂鏁堟灉CSS鍔ㄧ敾璁剧疆涓篿nfinite缁撳悎animationiteration鐩戝惉瀹炵幇鍛ㄦ湡鎬цЕ鍙戞晥鏋溿€傛偍鍙互鐩存帴浣跨敤:hover鏉ユ殏鍋滃拰鎾斁鎺у埗鍙板姩鐢汇€傚綋鐒讹紝浣犱笉浠呭彲浠ヤ娇鐢ㄤ互涓婃渚嬶紝浠讳綍绫讳技鍔熻兘鐨凜SS浜や簰锛?hover,:active锛夐兘鍙互鏈濊繖涓柟鍚戞€濊€冿紝鏄笉鏄彲浠ユ洿浼橀泤鐨勫疄鐜帮紵馃鏈€鍚庯紝濡傛灉瑙夊緱瀵逛綘鏈夊ソ澶勫拰甯姪锛屾杩庣偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺?/p>
