suchen

Heim >Web-Frontend >js-Tutorial >So ersetzen Sie den Bannerbildpfad dynamisch durch JS tab_javascript-Kenntnisse

So ersetzen Sie den Bannerbildpfad dynamisch durch JS tab_javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:59:591266Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Ersetzen des Bannerbildpfads durch die JS-Registerkarte. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Hier ist eine Registerkarte, die zeigt, wie man ein Bild dynamisch ersetzt, indem man eine JS-Funktion verwendet, um den Pfad des ersetzten Bildes zu definieren, wenn die Maus darüber gleitet.

Die Parameterbeschreibung lautet wie folgt:

obj Das Objekt, das aktuell das Ereignis auslöst
hc-Klassenname des aktuell ausgewählten Elements
Inhalt Wählen Sie das Bild aus, dessen Pfad ersetzt werden muss
URL ist der Pfad des Bildes

Der Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Einführung in die grundlegenden Studiennotizen von AngularJS_AngularJSNächster Artikel：Eine kurze Einführung in die grundlegenden Studiennotizen von AngularJS_AngularJS

In Verbindung stehende Artikel

Mehr sehen