JS-Implementierung des Bildhervorhebungs-Anzeigeeffekts example

JS-Implementierung des Bildhervorhebungs-Anzeigeeffekts example_javascript skills

WBOY

Freigeben： 2016-05-16 15:30:06

Original

1364 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von JS, um den Effekt der Bildhervorhebung zu erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Gestern hat mich mein Freund gebeten, beim Erstellen eines Bildhervorhebungseffekts zu helfen. Obwohl es nicht schwierig, aber sehr kreativ ist:

<!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>name</title>
<style type="text/css">
*{}{margin:0; padding:0;}
a img{}{border:none;}
#imagesBox {}{ width:165px; height:110px; position:relative; left:100px; top:100px; z-index:1; border:1px solid black; background-color:white;}
#trans{}{ width:165px; height:110px; position:absolute; left:0; top:0; z-index:2; display:none; opacity:0.5; filter:alpha(opacity=50); background-color:black;}
#imagesBox li {}{ width:55px; height:55px; float:left; overflow:hidden;}
#imagesBox li a,#imagesBox li img {}{ width:55px; height:55px; display:block; cursor:pointer;}
#imagesBox li img{}{ position:relative;}
#imagesBox strong{}{position:absolute;left:0; top:50%; margin-top:-7px; z-index:999; display:block; color:white; width:100%; height:15px; text-align:center; z-index:999;} 
</style>
<script type="text/javascript">
  function gallery(obj){
    var tit=obj.getAttribute("alt");  
    document.getElementById("show_tit").firstChild.nodeValue=tit;
    document.getElementById("trans").style.display='block';
    obj.style.zIndex="3";
  }
  function clearBg(obj){
    document.getElementById("show_tit").firstChild.nodeValue="";
    document.getElementById("trans").style.display='none';
    obj.style.zIndex="1";
  }
</script>
</head>
<body>
<div id="imagesBox"> 
  <ul>
  <li><a href="#" title="名称1"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名称1"/><span></span></a></li>
  <li><a href="#" title="名称2"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名称2"/><span></span></a></li>
  <li><a href="#" title="名称3"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名称3"/><span></span></a></li>
  <li><a href="#" title="名称4"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名称4"/><span></span></a></li>
  <li><a href="#" title="名称5"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名称5"/><span></span></a></li>
  <li><a href="#" title="名称6"><img onmouseover="gallery(this);" onmouseout="clearBg(this)" src="/images/artist//12053006018793_3.jpg" height="55" width="55" alt="名称6"/><span></span></a></li>
 </ul>
<div id="trans"> </div>
<strong id="show_tit"> </strong>
</div>
</body>
</html>

Nach dem Login kopieren

Da ich die Designabsicht zunächst nicht vollständig verstand, habe ich versehentlich diesen Effekt erstellt:

<!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>name</title>
<style type="text/css">
*{margin:0; padding:0;}
a img{border:none;}
#imagesBox { width:165px; height:100px; position:relative; left:100px; top:100px;}
#imagesBox li { width:55px; height:55px; float:left; overflow:hidden; position:relative;}
#imagesBox li img { width:55px; height:55px; position:relative; z-index:2; }
#imagesBox li span { line-height:100px; background:#000; position:absolute; top:0; left:0; z-index:3; opacity:0.5; filter:alpha(opacity=50); 
display:block; width:55px; height:55px;}
#imagesBox li a:hover span{display:none;} 
#imagesBox strong{position:absolute;left:0; top:50%; margin-top:-7px; z-index:999; display:block; color:white; width:100%; height:15px; text-
align:center;} 
</style>
<script type="text/javascript">
  function gallery(obj){
    var tit=obj.getAttribute("title");  
    document.getElementById("show_tit").firstChild.nodeValue=tit;
    document.getElementById("imagesBox").onmouseout=function(){document.getElementById("show_tit").firstChild.nodeValue="这里显示
名字"};
  }
</script>
</head>
<body>
<div id="imagesBox">
 <ul>
  <li><a href="#" onmouseover="gallery(this);" title="名称1"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名称1"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名称2"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名称2"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名称3"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名称3"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名称4"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名称4"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名称5"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名称5"/><span></span></a></li>
  <li><a href="#" onmouseover="gallery(this);" title="名称6"><img src="/images/artist//12053006018793_3.jpg" height="55" 
width="55" alt="名称6"/><span></span></a></li>
 </ul>
 <strong id="show_tit">这里显示名字</strong>
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.