JS選項卡動態(tài)替換banner圖片路徑的方法
更新時間：2015年05月11日 12:20:51 投稿：shichen2014
這篇文章主要介紹了JS選項卡動態(tài)替換banner圖片路徑的方法,涉及javascript操作文件css樣式的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了JS選項卡動態(tài)替換banner圖片路徑的方法。分享給大家供大家參考。具體分析如下：
這里演示一個選項卡演示如何動態(tài)替換圖片的方法，用一個JS函數(shù)實現(xiàn)的定義鼠標(biāo)滑過替換圖片的路徑。
參數(shù)說明如下：
obj 當(dāng)前觸發(fā)事件的對象
hc 當(dāng)前選中元素的類名
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>選項卡動態(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)滑過替換圖片路徑的
函數(shù) 2012.8.24
作者 zoowar
參數(shù)說明
obj 當(dāng)前觸發(fā)事件的對象
hc 當(dāng)前選中元素的類名
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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了微信小程序制作扭蛋機(jī)代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
js中調(diào)用微信的掃描二維碼功能的實現(xiàn)代碼
這篇文章主要介紹了在js中調(diào)用微信的掃描二維碼功能的實現(xiàn)代碼，本文給大家分享了注意事項及常見問題分析，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
詳解JavaScript實現(xiàn)繼承的五種經(jīng)典方式(附圖解)
JavaScript中的繼承是一種機(jī)制,通過它可以創(chuàng)建一個對象,該對象可以享有另一個對象的屬性和方法,本文將詳細(xì)的為大家介紹實現(xiàn)繼承的五種經(jīng)典方式,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
解決Layui數(shù)據(jù)表格中checkbox位置不居中的方法
今天小編就為大家分享一篇解決Layui數(shù)據(jù)表格中checkbox位置不居中的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Node.js實戰(zhàn) 建立簡單的Web服務(wù)器
本章我們同樣通過實戰(zhàn)的演練，利用Node.js建立一個簡單的Web服務(wù)器2012-03-03
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)幸運抽獎頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結(jié)構(gòu)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本篇文章主要介紹了深入理解ES6中l(wèi)et和閉包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本篇文章通過js和css結(jié)合實現(xiàn)簡單的吞噬效果，代碼簡單易懂，需要的朋友可以參考下本文2015-09-09
js動態(tài)設(shè)置鼠標(biāo)事件示例代碼
動態(tài)設(shè)置鼠標(biāo)事件的方法有很多，接下來為大家介紹下js中是如何做到的，感興趣的朋友不要錯過2013-10-10