CSS制作图片弹出展示效果

css-image-popup

介绍一种用css制作缩略图弹出全图的方法,实现过程中没有用到任何的js。

HTML代码:

<DIV id=pic>
<A class=p1 title=”thumbnail image” href=”http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm” mce_href=”http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm”><img title=”BeautyTn” height=100 src=”Beauty-tn.jpg” mce_src=”Beauty-tn.jpg” width=100><IMG class=large title=”Beauty” height=498 src=”Beauty.jpg” mce_src=”Beauty.jpg” width=500></A>
</DIV>

对应的CSS:

#pic {WIDTH: 100px; BACKGROUND-COLOR: #ffffff; margin: 100px 0 0 80px;}
#pic A .large { BORDER: 0px; DISPLAY: block; WIDTH:0px; HEIGHT: 0px; } /*首先将大的展示图的高宽设为0,既不显示*/
#pic A IMG { BORDER: 0px;}
#pic A.p1 { BORDER: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px; TOP: 0px; HEIGHT: 100px; TEXT-DECORATION: none}
#pic A.p1:visited { BORDER: #000000 1px solid; DISPLAY: block; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100px; TOP: 0px; HEIGHT: 100px; TEXT-DECORATION: none}
#pic A.p1:hover {COLOR: #000000; BACKGROUND-COLOR: #8c97a3; TEXT-DECORATION: none}
#pic A.p1:hover .large {BORDER: #000000 1px solid; DISPLAY: block; LEFT: 150px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 498px } /*当鼠标经过缩略图时,展示图再设定的绝对位置显示*/

    star.gif 查看效果



本文链接: CSS制作图片弹出展示效果     本文作者:Mars Lau

转载请以链接形式注明原始出处和作者,“心情日志”文章谢绝转载!

3 条留言 我要留言

  • 1 Coolray  |  2009-08-20 at 10:36 上午  

    效果相当精彩,照例收藏,感谢博主分享!

  • 2 楼 洋洋  |  2009-10-27 at 3:54 下午  

    收藏了!感谢!

  • 3 楼 wknas  |  2011-03-26 at 11:00 上午  

    對不起,想請問一下
    圖片原始尺寸都不一樣大,可是又希望彈出時是以原始尺寸顯示
    可以做到這樣嗎?謝謝

支持Gravatar头像,想要一个Gravatar个性头像?可以到这里申请一个

必填

必填,绝不公开

向上

无觅相关文章插件,快速提升流量