CSS实现商品图片点击放大效果的方法-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS实现商品图片点击放大效果的方法

Mar 08, 2017 pm 02:16 PM

css

本文实例为大家分享了纯CSS实现图片点击放大带关闭按钮的图片特效代码，效果非常棒，供大家参考，具体内容如下

CSS实现商品图片点击放大效果的方法

源码下载、演示

实现代码：

CSS代码：

&lt;style type=&quot;text/css&quot;&gt;   
.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; }   
&lt;/style&gt;   
&lt;!--[if lte IE 6]&gt;   
&lt;style type=&quot;text/css&quot;&gt;   
/* 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;}   
&lt;/style&gt;

Salin selepas log masuk

htm代码：

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

&lt;/body&gt;

Salin selepas log masuk

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

Atas ialah kandungan terperinci CSS实现商品图片点击放大效果的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

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