JS選項卡動態替換banner圖片路徑的方法

2024-05-06 16:19:53

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JS選項卡動態替換banner圖片路徑的方法,涉及javascript操作文件css樣式的相關技巧,非常簡單實用,需要的朋友可以參考下

本文實例講述了JS選項卡動態替換banner圖片路徑的方法。分享給大家供大家參考。具體分析如下：

這里演示一個選項卡演示如何動態替換圖片的方法，用一個JS函數實現的定義鼠標滑過替換圖片的路徑。

參數說明如下：

obj 當前觸發事件的對象

hc 當前選中元素的類名

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>選項卡動態替換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");//調用函數

/*

定義鼠標滑過替換圖片路徑的

函數 2012.8.24

作者 zoowar

參數說明

obj 當前觸發事件的對象

hc 當前選中元素的類名

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">風景</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>