suchen

Heim  >  Artikel  >  Web-Frontend  >  Einfache Implementierung der JQuery Focus Map

Einfache Implementierung der JQuery Focus Map

高洛峰
高洛峰Original
2016-12-28 10:01:151218Durchsuche

Das Beispiel in diesem Artikel teilt den Implementierungscode der JQuery-Fokuskarte als Referenz. Der spezifische Inhalt lautet wie folgt: 

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>焦点图</title>
 <style type="text/css">
 img{position: relative;}
 ul{list-style: none;width: 545px;position: absolute;top: 280px;left: 170px;}
 li{float: left;width: 20px;line-height: 18px;border: 1px solid #ccc;background-color:#494a93;}
 a:hover{background-color: red;}
 a{display: block;width: 20px;line-height: 18px;color: white;text-decoration: none;text-align: center;font-size: 12px;font-family: arial;}
 p{width: 480px;text-align: center;}
 </style>
</head>
<body>
 <img src="images/1.jpg" alt="">
 <ul>
 <li><a href="images/1.jpg" title="日落">1</a></li>
 <li><a href="images/2.jpg" title="钢琴">2</a></li>
 <li><a href="images/3.jpg" title="大海">3</a></li>
 <li><a href="images/4.jpg" title="秋色">4</a></li>
 </ul>
 <p>这是一段测试文字</p>
 <script src="js/jquery-3.0.0.js"></script>
 <script type="text/javascript">
　　　　　　//方法一：超级简单易懂的方法
 /*$("ul li:nth-child(1) a").click(function(event){
  $("img").attr("src","images/1.jpg") 
 
  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)
 
  $("img").attr("src",$(this).attr("href"))
 
  $("ul li:nth-child(1)").css("background-color","red")
  $("ul li:nth-child(2)").css("background-color","#494a93")
  $("ul li:nth-child(3)").css("background-color","#494a93")
  $("ul li:nth-child(4)").css("background-color","#494a93")
  event.preventDefault();
 })
 $("ul li:nth-child(2) a").click(function(event){
  $("img").attr("src","images/2.jpg")
 
  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)
 
  $("ul li:nth-child(2)").css("background-color","red")
  $("ul li:nth-child(1)").css("background-color","#494a93")
  $("ul li:nth-child(3)").css("background-color","#494a93")
  $("ul li:nth-child(4)").css("background-color","#494a93")
  event.preventDefault();
 })
 $("ul li:nth-child(3) a").click(function(event){
  $("img").attr("src","images/3.jpg")
 
  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)
 
  $("ul li:nth-child(3)").css("background-color","red")
  $("ul li:nth-child(2)").css("background-color","#494a93")
  $("ul li:nth-child(1)").css("background-color","#494a93")
  $("ul li:nth-child(4)").css("background-color","#494a93")
  event.preventDefault();
 })
 $("ul li:nth-child(4) a").click(function(event){
  $("img").attr("src","images/4.jpg")
 
  var imgsrc=$(this).attr("href")
  $("img").attr("src",imgsrc)
 
  $("ul li:nth-child(4)").css("background-color","red")
  $("ul li:nth-child(2)").css("background-color","#494a93")
  $("ul li:nth-child(3)").css("background-color","#494a93")
  $("ul li:nth-child(1)").css("background-color","#494a93")
  event.preventDefault();
 })*/
　　　　　　
　　　　　　//方法二：简化了方法一重复的代码量 ，利用.parent().siblings().find("a")选择到父级的其他兄弟元素
 $("ul li a").click(function(event){
  /*$("img").attr("src","images/4.jpg")*/
 
  var imgsrc=$(this).attr("href");
  $("img").attr("src",imgsrc);
   
  $(this).css({"background-color":"red","color":"yellow"});
  $(this).parent().siblings().find("a").css({"background-color":"#494a93","color":"white"});
  event.preventDefault();
 
  var txt=$(this).attr("title");
  console.log(txt); //在控制台输出
  $("p").text(txt);
 })
 /*$("ul li a").hover(function(event){ 
  $(this).css("background-color","red");
 },function(){
  $(this).css("background-color","#494a93")
 })*/
 </script>
</body>
</html>

Die Idee ist: das Bild Der Pfad wird in das a-Tag geschrieben. Klicken Sie auf a, um $(this).attr("href"); zu erhalten, und geben Sie diesen Wert an den src von img. Schreiben Sie ein Klickereignis mit einfachem jQuery.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zur einfachen Implementierung des JQuery-Fokusdiagramms finden Sie auf der chinesischen PHP-Website!

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：So ersetzen Sie alle Zeichenfolgen durch jQueryNächster Artikel：So ersetzen Sie alle Zeichenfolgen durch jQuery

In Verbindung stehende Artikel

Mehr sehen