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