js實(shí)現(xiàn)鼠標(biāo)滑過文字鏈接色彩變化的效果
本文實(shí)例講述了js實(shí)現(xiàn)鼠標(biāo)滑過文字鏈接色彩變化效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠標(biāo)移入移出效果</title> <style> body,ul,h2,p{ margin:0; padding:0; font-family:"微軟雅黑"; background:#333; } li{list-style:none;} a{text-decoration:none;} #box{ width:270px;padding:10px 10px 20px; overflow:hidden;margin:20px auto 0; border:1px solid #FFF; } .internal{width:266px;float:left;} #box h2{ height:38px;border-bottom:1px solid #ccc; padding-left:5px; } #box h2 strong{ float:left; line-height:38px; color:#885050; } #box h2 a{ float:right;width:52px;height:14px; font-size:12px;text-indent:20px; color:#fff;line-height:12px; font-weight:normal;margin-top:10px; } #box li{ height:30px;position:relative; border-bottom:1px dashed #ccc; } #box li div,#box li p{ height:30px;position:absolute; top:0;left:0;width:100%; } #box li p{ background:#fff;opacity:0; filter:alpha(opacity=0); } #box li div a,#box li div span{ line-height:30px; font-size:12px;height:30px; } #box li div a { float:left;padding-left:5px; color:#7F5454;width:185px; overflow:hidden; } #box li div span{ padding-right:10px; float:right;color:#CF9494; } </style> <script type="text/javascript"> window.onload=function() { var d=document; var oBox=d.getElementById('box'); var aLi=oBox.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++) { var oP=aLi[i].getElementsByTagName('p')[0]; oP.iAlpha=0; oP.times=null; aLi[i].onmouseover=function() { oP=this.getElementsByTagName('p')[0]; oP.times && clearInterval(oP.times); oP.style.opacity=1; oP.style.filter="alpha(opacity=100)"; oP.iAlpha=100; }; aLi[i].onmouseout=function() { startMove(this.getElementsByTagName('p')[0]) }; } }; function startMove(obj) { obj.times && clearInterval(obj.time); obj.times=setInterval(function() { doMove(obj); },10); } function doMove(obj) { var iSpeed=5; if(obj.iAlpha<=iSpeed) { clearInterval(obj.times); obj.iAlpha=0; obj.time=null; } else { obj.iAlpha-=iSpeed; } obj.style.filter="alpha(opacity="+obj.iAlpha+")"; obj.style.opacity=obj.iAlpha/100; } </script> </head> <body> <div id="box"> <div class="internal"> <h2><strong>網(wǎng)頁(yè)特效代碼</strong> <a href="http://www.dbjr.com.cn/">more</a></h2> <ul> <li> <p></p> <div> <a href="http://www.dbjr.com.cn/"> 廣告代碼特效大全 </a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="http://www.dbjr.com.cn/"> JS特效代碼集錦 </a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="http://www.dbjr.com.cn/">商業(yè)網(wǎng)頁(yè)模板與光盤素材</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="http://www.dbjr.com.cn/">網(wǎng)頁(yè)制作教程</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="http://www.dbjr.com.cn/">網(wǎng)站源碼整站源代碼下載</a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="http://www.dbjr.com.cn/"> 網(wǎng)頁(yè)電子書下載 </a> <span>2011-09-10</span> </div> </li> <li> <p></p> <div> <a href="http://www.dbjr.com.cn/"> 免費(fèi)網(wǎng)頁(yè)模板下載 </a> <span>2011-09-10</span> </div> </li> </ul> </div> </div> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JS獲取鼠標(biāo)選中的文字
- js實(shí)現(xiàn)鼠標(biāo)懸停圖片上時(shí)滾動(dòng)文字說明的方法
- js實(shí)現(xiàn)文字垂直滾動(dòng)和鼠標(biāo)懸停效果
- jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果【附demo源碼】
- 一個(gè)有意思的鼠標(biāo)點(diǎn)擊文字特效jquery代碼
- jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
- jQuery實(shí)現(xiàn)鼠標(biāo)選文字發(fā)新浪微博的方法
- javascript(基于jQuery)實(shí)現(xiàn)鼠標(biāo)獲取選中的文字示例【測(cè)試可用】
相關(guān)文章
微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要介紹了微信小程序獲取驗(yàn)證碼60秒倒計(jì)時(shí)模板,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
這篇文章主要為大家詳細(xì)介紹了Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06使用BootStrapValidator完成前端輸入驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了使用BootStrapValidator來完成前端輸入驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié)
在同學(xué)們使用某些網(wǎng)站的新版本頁(yè)面的時(shí)候,經(jīng)常會(huì)出現(xiàn)一個(gè)類似于新手引導(dǎo)一樣的效果,本文主要介紹了js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié),感興趣的可以了解一下2023-04-04Javascript模擬scroll滾動(dòng)效果腳本
項(xiàng)目需要寫了一段模擬Scroll滾動(dòng)代碼,分享的同時(shí),我有些疑問,希望大家能幫忙解決,代碼如下2008-09-09JS跳轉(zhuǎn)手機(jī)站url的若干注意事項(xiàng)
去年年底開發(fā)了一個(gè)手機(jī)站平臺(tái),遇到了很多坎,今天小編給大家分享下使用JS跳轉(zhuǎn)手機(jī)站url的若干注意事項(xiàng),需要的朋友參考下吧2017-10-10Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12