怎么用代码实现WordPress两个JS滑动门？

​

​

编辑

怎么用代码实现WordPress两个JS滑动门？这两个滑动门特效网上淘来的，简单修改了一下，纯HTML代码构建，未加PHP函数，其中的图片和链接可自行替换，如果自己动手能力较强，可以加上Wordpress函数直接调用文章，加到主题模板的任意位置，装饰一下博客也不错，有童鞋要求分享，整理一下发出来，供大家折腾。

1、代码一、鼠标悬停滑动

<div class="ad"> <div class="box_top"> <i class="rt"></i> <i class="lt"></i> </div> <div class="ads_c"> <div class="droplist" id=lrtk> <dl> <dt><p>国内主机</p></dt> <dd><a class=hot href="http://2bcd.com/" target=_blank title="国内主机"><img src="https://2bcd.com/wp-content/uploads/2bcd.com.jpg"></a></dd> <dt><p> 主机教程</p></dt> <dd style="display: none"><a class=hot href="http://2bcd.com/" target=_blank title="国外主机"><img src="https://2bcd.com/"></a></dd> <dt><p>专业博客主机</p></dt> <dd style="display: none"><a class=hot href="http://xyy1.com/" target=_blank title="域名注册"><img src="https://2bcd.com "></a></dd> </dl> </div> <div class="clear"></div> </div> <div class="box-bottom"> <i class="lb"></i> <i class="rb"></i> </div></div><style type="text/css">.droplist dl,.droplist dt,.droplist dd{ padding: 0px; margin: 0px; color: #fff; }.droplist { width: 230px;}.droplist dl dt { background: #c01e22; border-top: 1px solid #ccc; width: 230px; text-indent: 20px; line-height: 29px; height: 29px;}.droplist dl dt p { cursor: pointer;}.droplist dl dt p.droplist-hover { background: #910004;}.droplist dl dd { display: none; overflow:hidden; width: 230px; height: 140px;}.droplist dl dd img {}</style><script type="text/javascript">$.fn.extend({ adadvance:function(){ var listobj=this; var objs =$('dt',this); var view =objs.length-1;//parseInt( Math.random()*objs.length); objs.each(function(i){ $(this).mouseover(function(){ $('dd',listobj).hide();$('.droplist-hover',listobj).attr("class","");$("dd a").fadeIn(1000);$(this).children("p").attr("class","droplist-hover");$(this).next().show()}) if(i!=view) { $(this).next().hide(); } else { $(this).next().show(); $(this).children("p").attr("class","droplist-hover"); } }); }});</script><script type=text/javascript>$('#lrtk').adadvance();</script>

2、说明：代码中的DIV可根据自己所使用主题进行修改。

3、代码直接加到主题模板中会比较乱，可以在所用主题目录中新建两个PHP模板文件，比如：adc-1.php将上面的代码分别粘贴进去。然后在主题模板适当位置采用这种形式调用即可：

<?php include('abc-1.php'); ?>