本文實(shí)例講述了JS選項(xiàng)卡動(dòng)態(tài)替換banner圖片路徑的方法。分享給大家供大家參考。具體分析如下：
這里演示一個(gè)選項(xiàng)卡演示如何動(dòng)態(tài)替換圖片的方法，用一個(gè)JS函數(shù)實(shí)現(xiàn)的定義鼠標(biāo)滑過(guò)替換圖片的路徑。
參數(shù)說(shuō)明如下：
obj 當(dāng)前觸發(fā)事件的對(duì)象
hc 當(dāng)前選中元素的類(lèi)名
content 選擇需要替換路徑的圖片
url 為圖片的路徑
代碼如下：
<!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=utf-8" /><title>選項(xiàng)卡動(dòng)態(tài)替換banner圖片路徑</title><script src="js/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ hoverFn($("ul li"),"hover_css",$("p img"),"big");//調(diào)用函數(shù) /* 定義鼠標(biāo)滑過(guò)替換圖片路徑的 函數(shù) 2012.8.24 作者 zoowar 參數(shù)說(shuō)明 obj 當(dāng)前觸發(fā)事件的對(duì)象 hc 當(dāng)前選中元素的類(lèi)名 content 選擇需要替換路徑的圖片 url 為圖片的路徑 */ function hoverFn(obj,hc,content,url){ obj.hover(function(){ var h_css=hc; $(this).addClass(h_css).siblings().removeClass(h_css); var imgUrl=$(this).attr(url); content.attr("src",imgUrl); }); }})</script><style type="text/css">div{width:1024px;height:768px;margin:0 auto;}ul{width:1024px;height:40px;margin:0;padding:0;}ul li{width:254px;line-height:40px;border-bottom:solid 2px #FB066F;text-align:center;list-style-type:none;float:left;margin-right:2px;background:#fff;}ul li.hover_css{border-bottom:solid 2px #06F;background:#f0f0f0;}p{margin:0;padding:0;text-align:center;padding-top:20px;}</style></head><body><div><ul><li class="hover_css" big="images/wall_s1.jpg">風(fēng)景</li><li big="images/wall_s2.jpg">美女</li><li big="images/wall_s3.jpg">帥鍋</li><li big="images/wall_s4.jpg">惡搞</li></ul><p><img src="images/wall_s1.jpg" /></p></div></body></html>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
