最近在研究用 Wordpress 打造网上商城,其中最大的障碍就是技术问题,要让访客一眼认为这是一个在线商城而非博客,就必须让 Wordpress 有在线商城的特点。所谓网上商城,就必须有足够吸引眼球的产品展示效果,之前我用 showfom 的 Auto HighSlide 插件,这是一款超轻量级自动图片效果插件,确实很不错,不过昨天路过芒果的网站,发现一个更适合我的实现方法:纯 CSS 打造产品放大展示效果。
将鼠标移至图片即可见产品放大展示效果:
效果和照片都很帅吧
言归正传说代码,首先是 html 结构,如下所示:
<a class="p1" href="#" title="small image"><img src="小图URL地址" alt="small image" title="small image"><img src="大图URL地址" alt="large image" class="large" title="large image"></a>
</div>
另外,还有至关重要的 CSS,以下 CSS 样式仅作参考:
background-color:#FFF;
left:10px;
position:relative;
top:10px;
width:135px;
}
#pic a .large {
display:block;
height:1px;
left:-1px;
position:absolute;
top:-1px;
width:1px;
}
#pic a.p1,#pic a.p1:visited {
background:#FFF;
display:block;
height:180px;
left:0;
text-decoration:none;
top:0;
width:135px;
}
#pic a.p1:hover {
background-color:#8C97A3;
color:#000;
text-decoration:none;
}
#pic a.p1:hover .large {
border:1px solid #000;
display:block;
height:360px;
left:150px;
position:absolute;
top:-60px;
width:270px;
}
更多精彩 CSS 效果请见:《53个不可或缺的 CSS 技巧》



图是亮点
这个效果真的不错,老万没有考虑下写成插件?
第三次看到真人
我第一看感觉怎么觉得你和张三很像?
你是说张三网站上的那张照片?那就是我啦
老万。。。你竟然自曝照片也不吭声。。。没发现……
小伙真帅,这效果就是不错~~~~
哈哈,谢谢,要的就是这效果
想问一下博主你这风景是桂林的吗?》
呵呵,不是的,不过江南风景都大同小异,这是在浙东大峡谷旅游时拍的
终于看到庐山真面目!!
呵呵,我的样子没吓到你吧
How old you are?
二十有四
这个必须顶,很有用的说。
我看你可以把博客名改为WP代码之家了吧,呵呵。
嘿嘿,最近研究WP比较多一些,这方面也就多写了点文章
你旅游回来了呀,有啥照片分享没?
这个方法很早前见过,哈。
不过。。我觉着效果不咋滴,不太有美感。难道是照片中没有 美女的原因?
这照片不会就是万戈你本人吧?
嘿嘿,正是小弟
你确定大我两岁,好像跟我一样大嘛~~
你是想说我保养的好?
囧.............
还行···
这个人生小万戈
这个方法不错。至于万戈玉照么。。。华丽地飘过了
多么迷离的眼神啊
啧啧,终于有图像与“万戈”(总感觉是“哥”)建立联系了!
看到我的照片,应该感觉很难再和“哥”联系起来了吧
嗯 这个好 万戈长得超级猥琐%……%
Showfom的目光真敏锐,这也被你看出来了,我已经选了张相对不猥琐的照片。。。
严重同意 哈哈。。。。
哈哈,终于看到照片了啊
比我想象中的帅多了嘛
万戈同学,非常帅……
哈哈,自恋照一张,见笑了