CSS-Methode, um den Click-to-Enlarge-Effekt von Produktbildern zu erzielen

Das Beispiel in diesem Artikel teilt Ihnen den Code für Bildspezialeffekte mit, der Bilder zum Vergrößern per Mausklick mit Schaltflächen zum Schließen mithilfe von reinem CSS implementiert. Der Effekt ist sehr gut und dient als Referenz. Der spezifische Inhalt ist wie folgt >

Quellcode-Download, Demonstration

Implementierungscode:

CSS-Code:

<style type="text/css">   
.product { width:320px; height:150px; border:1px solid #ddd; margin:0 auto; padding:10px; }   
.productInfo { width:150px; float:left; }   
.productMfr { font:bold 16px/18px arial, sans-serif; color:#c00; padding:0; margin:0; }   
.productType { font:bold 14px/18px arial, sans-serif; color:#000; padding:0; margin:0; }   
.features { padding:10px 0; margin:0; list-style:none; }   
.features li { font:normal 12px/16px arial, sans-serif; color:#555; }   
.price { font:bold 14px/18px arial, sans-serif; color:#00c; padding:0 0 10px 0; margin:0; }   
a.clickbox, a.clickbox:visited, a.clickbox:hover { text-decoration:none; text-align:center; }   
a.clickbox img { display:block; border:0; }   
a.clickbox b { display:block; }   
a.clickbox em { font:bold 10px/12px arial, sans-serif; color:#000; }   
a.clickbox { float:left; margin:0 15px 15px 0; display:inline; }   
a.clickbox .lightbox { position:absolute; left:-9999px; top:-10000px; cursor:default; z-index:500; }   
a.clickbox .light { position:absolute; left:0; top:0; width:100%; }   
a.clickbox .box { position:absolute; left:0; width:100%; text-align:center; height:300px; top:30%; margin-top:-150px; }   
/* trigger for IE6 */
a.clickbox:active { direction:ltr; }   
a.clickbox:active .lightbox { left:0; top:0; width:100%; height:100%; }   
a.clickbox .lightbox:hover, a.clickbox:focus .lightbox { position:fixed; left:0; top:0; width:100%; height:100%; }   
a.clickbox .lightbox:hover .light, a.clickbox:active .lightbox .light, a.clickbox:focus .lightbox .light { background:#fff; width:100%; height:100%; filter: alpha(opacity=90);  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);   
opacity:0.90; }   
a.clickbox .lightbox:hover .box img, a.clickbox:active .lightbox .box img, a.clickbox:focus .lightbox .box img { border:1px solid #ddd; margin:0 auto; padding:30px; background:#fff; }   
a.clickbox .lightbox:hover .box span, a.clickbox:active .lightbox .box span, a.clickbox:focus .lightbox .box span { display:block; width:560px; padding:0; margin:10px auto; text-align:center; text-decoration:none; background:#fff; border:1px solid #ddd; }   
a.clickbox .lightbox .box span.title { font:normal 22px/26px verdana, sans-serif; color:#069; }   
a.clickbox .lightbox .box span.text { font:normal 11px/16px verdana, sans-serif; color:#333; }   
.clear { clear:left; }   
a.clickbox i { display:block; width:32px; height:32px; position:fixed; rightright:-100px; top:0; z-index:500; }   
a.clickbox .lightbox:hover i, a.clickbox:active i, a.clickbox:focus i { rightright:50%; top:30%; background:url(close2.png); margin-right:-295px; margin-top:-165px; }   
#close { display:block; position:fixed; width:32px; height:32px; rightright:50%; top:30%; margin-right:-295px; margin-top:-165px; z-index:1000; background:url(trans.gif); cursor:pointer; }   
</style>   
<!--[if lte IE 6]>   
<style type="text/css">   
/* to get IE6 to center the Clickbox - adjust the height to cover the whole page */
a.clickbox:active .lightbox {left:50%; margin-left:-2500px; height:2000px; width:5000px;}   
a.clickbox:active .lightbox .light {height:2000px;}   
a.clickbox i {display:block; width:32px; height:32px; overflow:hidden; float:rightright; cursor:pointer; position:static; background:url(close.png);}   

#close {margin-right:0; margin-top:0; z-index:1000; background:url(trans.gif); cursor:pointer;}   
a.clickbox .lightbox:hover i,   
a.clickbox:active i {rightright:32px; top:32px; background:url(close.png); margin-right:0; margin-top:0;  background:url(close.png);}   

a.clickbox .frame {width:500px; height:300px; background:#fff; border:1px solid #000; padding:10px;}   
a.clickbox .box {top:5%; margin-top:0;}   
</style>

htm-Code:

<body>
<p class="product">
<a class="clickbox" href="#url">
<img src="/static/imghw/default1.png"  data-src="eos500d-thumb.jpg"  class="lazy"   alt="" title="Click for larger image" />
<em>• large image •</em>
<b class="lightbox">
<b class="light">
</b> <b class="box">
<img src="/static/imghw/default1.png"  data-src="eos500d.jpg"  class="lazy"   alt="" />
<span class="title">It&#39;s your vision - make it count</span>
<span class="text">With the EOS 500D, every side of your story comes alive.<br />
  <i></i>
</span>
</b>
</b>
</a>
  <p class="productInfo">
    <p class="productMfr">Canon EOS 500D</p>
    <p class="productType">Digital SLR Camera</p>
    <ul class="features">
      <li>• 15.1 MP CMOS sensor</li>
      <li>• Full HD (1080p) movies</li>
    </ul>
    <p class="price">£470</p>
    <img src="/static/imghw/default1.png"  data-src="cart.gif"  class="lazy"   alt="Checkout" /> </p>
</p>
<p id="close"></p>
<br>
<br>

</body>

Das Obige ist der gesamte Inhalt dieses Artikels zum Lernen aller, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Das obige ist der detaillierte Inhalt vonCSS-Methode, um den Click-to-Enlarge-Effekt von Produktbildern zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!