DDR爱好者之家

纯CSS实现商品图片点击放大效果
站长资源 2024/11/24 佚名
63 1538
DDR爱好者之家 Design By 杰米

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

纯CSS实现商品图片点击放大效果

源码下载、演示

实现代码：

CSS代码：

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. .product { width:320px; height:150px; border:1px solid #ddd; margin:0 auto; padding:10px; }   
  3. .productInfo { width:150px; float:left; }   
  4. .productMfr { font:bold 16px/18px arial, sans-serif; color:#c00; padding:0; margin:0; }   
  5. .productType { font:bold 14px/18px arial, sans-serif; color:#000; padding:0; margin:0; }   
  6. .features { padding:10px 0; margin:0; list-style:none; }   
  7. .features li { font:normal 12px/16px arial, sans-serif; color:#555; }   
  8. .price { font:bold 14px/18px arial, sans-serif; color:#00c; padding:0 0 10px 0; margin:0; }   
  9. a.clickbox, a.clickbox:visited, a.clickbox:hover { text-decoration:none; text-align:center; }   
  10. a.clickbox img { display:block; border:0; }   
  11. a.clickbox b { display:block; }   
  12. a.clickbox em { font:bold 10px/12px arial, sans-serif; color:#000; }   
  13. a.clickbox { float:left; margin:0 15px 15px 0; display:inline; }   
  14. a.clickbox .lightbox { position:absolute; left:-9999px; top:-10000px; cursor:default; z-index:500; }   
  15. a.clickbox .light { position:absolute; left:0; top:0; width:100%; }   
  16. a.clickbox .box { position:absolute; left:0; width:100%; text-align:center; height:300px; top:30%; margin-top:-150px; }   
  17. /* trigger for IE6 */  
  18. a.clickbox:active { direction:ltr; }   
  19. a.clickbox:active .lightbox { left:0; top:0; width:100%; height:100%; }   
  20. a.clickbox .lightbox:hover, a.clickbox:focus .lightbox { position:fixed; left:0; top:0; width:100%; height:100%; }   
  21. 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);   
  22. opacity:0.90; }   
  23. 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; }   
  24. 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; }   
  25. a.clickbox .lightbox .box span.title { font:normal 22px/26px verdana, sans-serif; color:#069; }   
  26. a.clickbox .lightbox .box span.text { font:normal 11px/16px verdana, sans-serif; color:#333; }   
  27. .clear { clear:left; }   
  28. a.clickbox i { display:block; width:32px; height:32px; position:fixed; rightright:-100px; top:0; z-index:500; }   
  29. 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; }   
  30. #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; }   
  31. </style>   
  32. <!--[if lte IE 6]>   
  33. <style type="text/css">   
  34. /* to get IE6 to center the Clickbox - adjust the height to cover the whole page */  
  35. a.clickbox:active .lightbox {left:50%; margin-left:-2500px; height:2000px; width:5000px;}   
  36. a.clickbox:active .lightbox .light {height:2000px;}   
  37. a.clickbox i {display:block; width:32px; height:32px; overflow:hidden; float:rightright; cursor:pointer; position:static; background:url(close.png);}   
  38.   
  39. #close {margin-right:0; margin-top:0; z-index:1000; background:url(trans.gif); cursor:pointer;}   
  40. a.clickbox .lightbox:hover i,   
  41. a.clickbox:active i {rightright:32px; top:32px; background:url(close.png); margin-right:0; margin-top:0;  background:url(close.png);}   
  42.   
  43. a.clickbox .frame {width:500px; height:300px; background:#fff; border:1px solid #000; padding:10px;}   
  44. a.clickbox .box {top:5%; margin-top:0;}   
  45. </style>   

htm代码：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <div class="product">    
  3. <a class="clickbox" href="#url">    
  4. <img src="eos500d-thumb.jpg" alt="" title="Click for larger image" />    
  5. <em>• large image •</em>    
  6. <b class="lightbox">    
  7. <b class="light">  
  8. </b> <b class="box">    
  9. <img src="eos500d.jpg" alt="" />    
  10. <span class="title">It's your vision - make it count</span>    
  11. <span class="text">With the EOS 500D, every side of your story comes alive.<br />  
  12.   <i></i>  
  13. </span>    
  14. </b>    
  15. </b>    
  16. </a>  
  17.   <div class="productInfo">  
  18.     <p class="productMfr">Canon EOS 500D</p>  
  19.     <p class="productType">Digital SLR Camera</p>  
  20.     <ul class="features">  
  21.       <li>• 15.1 MP CMOS sensor</li>  
  22.       <li>• Full HD (1080p) movies</li>  
  23.     </ul>  
  24.     <p class="price">£470</p>  
  25.     <img src="cart.gif" alt="Checkout" /> </div>  
  26. </div>  
  27. <div id="close"></div>  
  28. <br>  
  29. <br>  
  30.   
  31. </body>  
  32.   
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米