网站主题需要各种网页效果来展示自己的网站，尤其是图片主题类型的网站更需要一些jquery效果来实现。今天想用到一种当鼠标经过缩略图片的时候即在右边放大图片的效果让用户可以不用点击进去即可大致上浏览到wordpress主题的图片。实现的步骤如下：
HTML代码：
[code]<div id=”post-list”>
<div class=”list” style=”background:red;”>
<div id=”post-list0″ class=”post-list”>
<div id=”post-4497″ class=”post”>
<div class=”thumb”>
<a title=”” href=”链接地址” target=”_blank”><img src=”缩略图片” alt=”” data-img=”放大图片” height=”140″ width=”220″></a>
</div>
<h2 class=”title”><a href=”链接地址” title=”” target=”_blank”>文本内容</a></h2>
</div> <!–post-4497–>
</div> <!–post-list–>
</div><!–list–>
</div><!–post-list–>[/code]
CSS代码：
[code]#post-list .post{width:220px;height:200px;padding:1px;margin:0 15px 19px 4px;float:left;-moz-box-shadow:0 0 3px rgba(0,0,0,0.20);-webkit-box-shadow:0 0 3px rgba(0,0,0,0.20);box-shadow:0 0 3px rgba(0,0,0,0.20);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;overflow:hidden;}
.post .thumb{width:220px;height:140px;position:relative;}
.post .thumb img{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:220px;height:140px;}
.thumb em{*display:none;position:absolute;left:-190px;width:220px;height:140px;background-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));/*Mozilla*/background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));/*Webkit*/background-image:-o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0)); /*Opera11*/background-image:-ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0)); /*Opera11*/transform:skewx(-25deg);-o-transform:skewx(-25deg);-moz-transform:skewx(-25deg);-webkit-transform:skewx(-25deg);-moz-transition:0s;-o-transition:0s;-webkit-transition:0s;transition:0s;cursor:pointer;}
.thumb:hover em{left:190px;transition:0.7s;-moz-transition:0.7s;-o-transition:0.7s;-webkit-transition:0.7s;}
#tooltip{position:absolute;background:#eee;color:#333;padding:2px;z-index:999;}[/code]
之后在HTML代码后面加载izt.js代码，点击此下载地址。
效果在本站wordpress主题更多栏目中。