jquery制作鼠标移动到列表行的位置即显示缩略图特效

关键字：jquery|列表|鼠标|移动|缩略图
最近添加了wordpress主题的模块，既然是主题就少不了图片当然就好使用jquery制作网页特效是最好的了效果就跟本站侧边一样。现在介绍如何制作：

1，加载jquery库和picBigNew.js
2，在你想添加的地方加上以下html代码：

[code]<div id=”d_picTit”></div>

<div class=”rankClick rankPic” id=”rankPic”>
<div class=”acleTitBlue”>
<h2>WordPress主题</h2>

</div>
<div>
<ul class=”listTop” id=”picBox1″ style=”display: block; “>
<?php

$args=array(
‘cat’ => ‘18,19’, // 分类ID,单引号中填写具体ID，在你后台的分类目录中鼠标查找
‘posts_per_page’ => 10, // 显示篇数

);
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post();
?>

<li class=”post-<?php the_ID(); ?>”>

<a href=”<?php the_permalink() ?>” target=”_blank” class=”img”>
<img src=”<?php echo catch_that_image() ?>” width=”100px” height=”65px” />
</a>

<a class=”content” style=”word-break:break-all; ” href=”<?php the_permalink() ?>” target=”_blank” title=”<?php the_title(); ?>”><?php the_title(); ?></a>

</li>

<?php endwhile; endif; wp_reset_query();?>

</ul>
</div>
</div>[/code]

3，我们还需要调用文章的第一张图作为我们的缩略图
方法之前写过如下：

https://sdeno.com/wordpress无插件实现调用文章第一张图片当做首页缩略图/

4，还要添加如下样式：
[code].rankPic .listTop li a{ text-decoration:none;}
.rankPic .listTop {}
.rankPic .listTop li{
background: url(“images/list-type.png”) no-repeat scroll left center transparent;
height: 22px;
line-height: 22px;
margin-left: 4px;
text-indent: 14px;
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
}
.rankPic .listTop li a.img{ display:none;}
.rankPic .listTop li.post-942{ height:86px!important; overflow:hidden; background:#d9d9d9;}
.rankPic .listTop li.post-942 a.img{
display:block; width:100px!important; height:65px!important; overflow:hidden; float:left;margin: 10px 0px 0 0px !important; padding-right:14px;}
.rankPic .listTop li.post-942 a.img img{ width:100px; height:65px; }
.rankPic .listTop li.post-942 a.content{
float:right;
width:125px;
height:80px;
list-style-type:disc;
}[/code]

注意：这里的post-942就是列表第一行<li>的class名根据需要修改成自动获取得到的class名，同样也在picBigNew.js修改。

下载：picBigNew.js