js文字內容感應滑鼠懸浮效果程式碼例項
本章節分享一段程式碼例項,它實現了文字感應滑鼠懸浮的效果。
可能不少朋友會認為這樣的程式碼沒有什麼實際價值,因為很少有這樣的應用,但是這裡想說的是,找一個能夠馬上套用的程式碼不如能夠掌握它的實現原理,以便於以後實際改造,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0px; padding:0px; } body{ font-size:12px } ul{ list-style:none; } .all ul{ width:100%; text-align:center; } .all ul li{ width:100%; height:40px; line-height:40px; border-bottom:1px dashed #990066; cursor:pointer; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.all ul li').mouseover(function(){ $(this).animate({"height":"70px","line-height":"70px"},100) }).mouseleave(function(){ $(this).stop().animate({"height":"40px","line-height":"40px"},100) }); }) </script> </head> <body> <div class="all"> <ul> <li>div教程</li> <li>css教程</li> <li>json教程</li> </ul> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).$('.all ul li').mouseover(function(){}),匹配的li元素註冊mouseover事件處理函式。
(3).$(this).animate({"height":"70px","line-height":"70px"},100),移動化方式調整元素的高度和行高。
(4).mouseleave(function(){}),為元素註冊mouseleave事件處理函式。
(5).$(this).stop().animate({"height":"40px","line-height":"40px"},100),當滑鼠離開的時候恢復原來的高度和行高。
二.相關閱讀:
(1).mouseover事件可以參閱jQuery mouseover 事件一章節。
(2).animate()方法可以參閱jQuery animate()一章節。
(3).mouseleave事件可以參閱jQuery mouseleave 事件一章節。
(4).stop()方法可以參閱jQuery stop()一章節。
相關文章
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- 滑鼠懸浮評分效果程式碼例項
- css滑鼠懸浮tips效果程式碼例項CSS
- 滑鼠懸浮實現翻牌效果程式碼例項
- 滑鼠懸浮實現抖動效果例項程式碼
- 滑鼠懸浮連結出現音效效果程式碼例項
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- 滑鼠懸浮底部具有動態延伸條效果程式碼例項
- css滑鼠懸浮顏色動態填充效果程式碼例項CSS
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- javascript滑鼠懸浮行變色程式碼例項JavaScript
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- 滑鼠懸浮連結彈出提示程式碼例項
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- 滑鼠懸浮改變連結樣式程式碼例項
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- 滑鼠懸浮於連結<a>之上出現提示文字效果程式碼
- js禁止使用滑鼠選中元素內容程式碼例項JS
- 滑鼠懸浮可以伸縮的搜尋框程式碼例項
- 自定義滑鼠懸浮連結彈出提示程式碼例項
- 滑鼠懸浮上浮出現說明文字程式碼例項
- 滑鼠懸浮出現tips提示框效果程式碼例項
- 文字框輸入內容實現智慧提示效果程式碼例項
- js實現滑鼠懸浮將當前內容寫入其他元素JS
- js滑鼠懸浮字串實現字串跳動效果JS字串
- 滑鼠懸浮相應的表單行背景變色且有填寫提示程式碼例項
- javascript元素內容漸現效果程式碼例項JavaScript
- js檢測瀏覽器內容縮放效果程式碼例項JS瀏覽器
- CSS 滑鼠懸浮動畫暫停效果CSS動畫
- css滑鼠懸浮下拉選單效果CSS
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- js滑鼠懸浮連結背景動畫方式漸變效果JS動畫
- css3實現滑鼠懸浮文字水平晃動效果CSSS3
- jQuery點選文字框清除內容程式碼例項jQuery
- JavaScript讀取文字檔案內容程式碼例項JavaScript