js控制 @keyframes,實現鼠標移入移出無卡頓效果

var style = document.styleSheets[0];

創新互聯建站專業為企業提供南京網站建設、南京做網站、南京網站設計、南京網站制作等企業網站建設、網頁設計與制作、南京企業網站模板建站服務，十年南京做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

console.log(style)

document.styleSheets這個接口可以獲取網頁上引入style樣式表。

拿到樣式表后就可以操作樣式啦~

insertRule方法用來給當前樣式表插入新的樣式規則。

insertRule(rule,index)

rule:要添加到樣式表的規則。

index:要把規則插入或附加到 cssRules 數組中的位置。

js既然可以添加 @keyframes 樣式了，那動態傳值就方便啦！

附實戰筆記一篇

javascript鼠標移入移出事件

兩種辦法：2級菜單要緊挨著1級菜單，至少有一部分是相連的，這樣鼠標沿著相連的部分移動，就不會讓2級菜單自動隱藏了；或者在1級菜單的mouseout事件中，不要立刻讓2級菜單隱藏，而是延遲一段時間再隱藏，比如 var t = setTimeout("2級菜單.style.display='none'",1000); ，這樣的話，只要在1秒內鼠標移到2級菜單上即可，當然，2級菜單的mouseover事件要立刻執行 clearTimeout(t);。特別注意：變量t一定要設為全局的。

js css 鼠標移入某個區域滑出一個框的效果怎么做？

1、輸入代碼，其中button是鼠標要滑動的地方，滑過button時，class為content的內容就要顯示出來，鼠標滑出去的時候，這塊內容就需要重新隱藏起來。

2、把黑色內容的部分初始狀態寫成隱藏。只需要在class為content里寫上display:none,即可。

3、來看下代碼和瀏覽器中的效果。可以看到黑色內容部分已經不見了。

4、把onmouseover和onmouseout兩個事件作用在button上面，再寫overShow()和overHide()兩個 函數。可以看到在函數中通過改content的display屬性來實現顯示隱藏的效果。

5、在瀏覽器中就可以看到效果了。