Bagaimana untuk menggantikan laluan imej sepanduk secara dinamik dengan kemahiran JS tab

Bagaimana untuk menggantikan laluan imej sepanduk secara dinamik dengan kemahiran JS tab_javascript

WBOY

Lepaskan： 2016-05-16 15:59:59

asal

1204 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah menggantikan laluan imej sepanduk secara dinamik dengan tab JS. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Berikut ialah tab yang menunjukkan cara menggantikan imej secara dinamik, menggunakan fungsi JS untuk menentukan laluan imej yang diganti apabila tetikus meluncur ke atasnya.

Penerangan parameter adalah seperti berikut:

obj Objek yang pada masa ini mencetuskan acara
nama kelas hc bagi elemen yang dipilih pada masa ini
kandungan Pilih imej yang laluannya perlu diganti
url ialah laluan imej

Kod adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.