网站开发之鼠标悬停简单特效实现（四）
生活随笔
收集整理的這篇文章主要介紹了
网站开发之鼠标悬停简单特效实现（四）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
? ? ? ? 鼠標懸停等操作和特效是網(wǎng)站設(shè)計非常重要的一個內(nèi)容，常見的包括包括：鼠標移動懸停放大、鼠標懸停背景顏色變換、鼠標懸停下拉菜單顯示、圖片旋轉(zhuǎn)等特效，這篇文章主要是總結(jié)HTML和JavaScript中關(guān)于鼠標操作的一些特效，希望基礎(chǔ)性文章對你有所幫助，如果文章中存在錯誤或不足之處，還請海涵~
一. 鼠標懸停圖片放大效果
? ? ? ? 該功能主要是通過超鏈接<a>實現(xiàn)的，其中hover是表示懸停的效果：
<html> <head> <title>鼠標懸停放大</title> <style> #resize a:hover { position: absolute;}#resize a:hover img { width: 200px; height: 200px} </style> </head> <body><p>圖片懸停放大圖片</p><div id="resize"><a href="index.html"><img src="move.jpg" border=0 height="50" width="50" /></a></div> </body> </html> ? ? ? ? 其中運行的效果如下所示：
??
? ? ? ? 注意：hover表示懸停，圖片對應(yīng)“a:hover img”。
二. 鼠標懸停背景顏色變換
? ? ? ? 核心代碼如下所示，主要通過鼠標懸停hover設(shè)置超鏈接變換。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠標懸停背景色變換</title> <style type="text/css">.navigation {margin:0 auto; /* 居中顯示 */text-align: center;width: 600px;height: 50px;margin-top: 20px;background-color: #FFC1E0;}h2 {float: left; /* 水平顯示 */background-color: #4F282D;height: 40px;width: 92px;font-family: "Palatino Linotype";font-weight: 400;text-align: center;padding-top: 0px;margin-top: 4px; /* 否則h2下移 */margin-left: 6px;}.navigation a {color: #1AFD9C; /* 超鏈接字體顏色 */text-decoration: none;}.navigation h2 a:hover {color: #39F; /* 超鏈接懸停變換顏色 */}.navigation h2:hover {background-color: #F9F900;} </style> </head> <body><div class="navigation"><h2><a href="#">首頁</a></h2><h2><a href="#">關(guān)于我</a></h2><h2><a href="#">相冊</a></h2><h2><a href="#">心情</a></h2><h2><a href="#">留言</a></h2><h2><a href="#">文章</a></h2></div> </body> </html> ? ? ? ? 運行結(jié)果如下所示，鼠標懸停前的效果：? ? ? ? 鼠標移動到背景上面的效果如下所示：
? ? ? ? 下面講解幾個重點：
? ? ? ? 1、在<div class="navigation">布局過程中，需要在CSS中設(shè)置"margin:0 auto;"，才能讓它居中顯示，這段代碼的含義是：第一個值就是元素的上下邊距0，第二個值就是左右邊距。當元素的定義了width屬性時，auto還能實現(xiàn)居中的效果。
? ? ? ? 2、在CSS中設(shè)置h2，需要添加"float: left;"，使其水平顯示，不增加該句的效果如下所示：
? ??
? ? ? ? 3、整個DIV布局代碼如下所示，h2會向下移動一段距離，這時CSS中通過"margin-top: 4px;"進行微調(diào)。
? ? ? ? 4、懸停的核心代碼如下所示，其中"text-decoration: none;"設(shè)置超鏈接無下劃線，然后是懸停在超鏈接a和字體h2的變換效果。注意冒號(:)和hover之間不能有空格，否則效果消失。
三. 鼠標懸停圖片旋轉(zhuǎn)
? ? ? ? 下面這段代碼是網(wǎng)上找到的，鼠標懸停圖片旋轉(zhuǎn)的特效，非常不錯，推薦使用。
? ? ? ? 旋轉(zhuǎn)參考地址：http://www.w3school.com.cn/cssref/pr_transform.asp
? ? ? ? PS：代碼忘記出處了，如果誰知道提醒我，我補加原文地址。
????
四. 鼠標懸停下拉菜單顯示
? ? ? ? 這段代碼主要是通過鼠標懸停，顯示下菜單的效果，希望對你有所幫助。
? ? ? ? 運行效果如下圖所示：
? ? ? ? 下面這段代碼是簡單實現(xiàn)鼠標懸停下拉菜單彈出：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>鼠標懸停下拉</title> <style>ul.menu, ul.menu li{margin:0px;padding:0px;list-style:none;position:relative;}ul.menu li{line-height:25px}ul.menu li{float:left;margin-left:10px}ul.menu div{display:none;position:absolute;top:20px;left:0px}ul.menu div a{display:block}ul.menu li:hover div{display:block;} </style> </head> <body> <div id="main"><ul class="menu"><li><a href="#">Menu1</a><div><a href="#">menu11</a><a href="#">menu12</a></div></li><li><a href="#">Menu2</a><div><a href="#">menu21</a><a href="#">menu22</a></div></li><li><a href="#">Menu3</a><div><a href="#">menu31</a><a href="#">menu32</a></div></li></ul> </div> </body> </html> ? ? ? ? 顯示效果如下所示：
? ? ? ? 希望文章對你有所幫助，這是簡單總結(jié)了HTML鼠標常見的事件。
? ? ? ? 這個網(wǎng)站很多經(jīng)典效果，但要登錄。網(wǎng)址：http://www.16css.com/menu/
? ? ? ? 下面是今天晚上發(fā)表的一篇QQ說說：
? ? ? ? 如果說當老師是我的第一個愿望，花了我18年時間，三個月前終于實現(xiàn)；那么，我的第二個愿望，想有一個自己的個人網(wǎng)站，最近也終于實現(xiàn)了，好開心啊，哈哈哈。
? ? ? ? 歡迎大家訪問: www.eastmountyxz.com
? ? ? ? 大四畢業(yè)那年我在去遵義支教的路上寫下這樣一首詩：
貴州眾美路迢迢， 未負勞心此一遭。 搜得破書三四本， 也堪將去教爾曹。 ? ? ? ? 期待自己的第三個愿望，網(wǎng)站目前只有首頁，太忙了還沒豐富進去，更多課程內(nèi)容見我的CSDN。最后當然得感謝沈同學(xué)做的首頁，哈哈哈，沒白教這些學(xué)生，真心感謝。
但行好事，莫問前程。 待隨滿天李桃，再追學(xué)友趣事。 ? ? ? ? 同樣，待我已老，也會把自己的每個階段的人生都豐富到這個網(wǎng)站中去，感覺自己一輩子都與學(xué)校學(xué)生有關(guān)了吧！享受在學(xué)校里與同學(xué)，學(xué)生的生活，發(fā)自內(nèi)心的enjoy。
? ? ? ? 日子長著，校園這壺老酒還需我慢慢品嘗。
? ? ? ? 有學(xué)生說我的第三個愿望是：找個妹子談?wù)勅松臀业牡谒膫€愿意，這個不錯。
? ? ? ? 有學(xué)生又說：我是他大學(xué)最好的老師
? ? ? ? 其實，我真的很榮幸認識自己的每一個學(xué)生，所以也會用心對待任何一個并堅持。
? ? ? ? 哎，又雞湯了，當老師后咋變成這樣了，fuck~
? ? ? ??(By:Eastmount 2016-11-06 半夜2點?http://blog.csdn.net/eastmount/?)
總結(jié)
以上是生活随笔為你收集整理的网站开发之鼠标悬停简单特效实现（四）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Python数据挖掘课程】五.线性回归
- 下一篇： 网站设计之Flash简单动画入门介绍（一