Rumah > Artikel > hujung hadapan web > Pelaksanaan JS kemahiran contoh_javascript kesan paparan imej yang menonjol

Pelaksanaan JS kemahiran contoh_javascript kesan paparan imej yang menonjol

WBOYasal: 2016-05-16 15:30:061353semak imbas

Contoh dalam artikel ini menerangkan kaedah menggunakan JS untuk mencapai kesan penyerlahan imej. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Semalam kawan saya minta tolong buat effect highlighting gambar Walaupun tak susah, sangat kreatif:

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

Pada mulanya, kerana saya tidak memahami sepenuhnya niat reka bentuk, saya secara tidak sengaja mencipta kesan ini:

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

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Operasi DOM bagi siri analisis kod sumber Jquery-1.9.1 (11)_jqueryArtikel seterusnya：Operasi DOM bagi siri analisis kod sumber Jquery-1.9.1 (11)_jquery

Artikel berkaitan

Lihat lagi