分享两个JS滑动门代码

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

<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 href="http://idc.wopus.org/" target=_blank title="国内主机"><img src="http://zmingcx.com/wp-content/uploads/sites/2/2013/10/idc1.jpg" alt="分享两个JS滑动门代码"></a></dd>
 <dt><p> 国外主机</p></dt>
 <dd style="display: none"><a href="http://idc.wopus.org/" target=_blank title="国外主机"><img src="http://zmingcx.com/wp-content/uploads/sites/2/2013/10/idc2.jpg" alt="分享两个JS滑动门代码"></a></dd>
 <dt><p>专业博客主机</p></dt>
 <dd style="display: none"><a href="http://idc.wopus.org/" target=_blank title="域名注册"><img src="http://zmingcx.com/wp-content/uploads/sites/2/2013/10/idc3.jpg" alt="分享两个JS滑动门代码"></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>

JS滑动门代码二、自动切换

<div class="ad">
 <div class="box_top">
 <i class="rt"></i>
 <i class="lt"></i>
 </div>
 <div class="ads_c">
 <div id="idc_box">
 <ul>
 <dd class="hove"><tt class="hove">专业博客主机</tt><a href="http://idc.wopus.org/" target=_blank title="专业博客主机"><img src="http://zmingcx.com/wp-content/uploads/sites/2/2013/10/idc-a.jpg" alt="分享两个JS滑动门代码"></a></dd>
 <dd><tt class="">国外主机</tt><a href="http://idc.wopus.org/" target=_blank title="国外主机"><img src="http://zmingcx.com/wp-content/uploads/sites/2/2013/10/idc-c.jpg" alt="分享两个JS滑动门代码"></a></dd>
 <dd><tt class="">国内主机</tt><a href="http://idc.wopus.org/" target=_blank title="国内主机"><img src="http://zmingcx.com/wp-content/uploads/sites/2/2013/10/idc-b.jpg" alt="分享两个JS滑动门代码"></a></dd>
 </ul>
 </div>
 </div>
 <div class="box-bottom">
 <i class="lb"></i>
 <i class="rb"></i>
 </div>
</div>
<style type="text/css">
#idc_box ul, #idc_box dd, #idc_box tt{
 margin:0px;
 padding:0px;
 float:left;
 list-style: none;
}
#idc_box{
 width:229px;
 height:230px;
 border-left: 1px solid #740a20;
}
#idc_box dd{
 width:21px;
 height:230px;
 overflow:hidden;
 position:relative;
}
#idc_box dd.hove{
 width:187px;
 text-align:right;
}
#idc_box dd tt{
 width:20px;
 height:230px;
 top:0px;
 left:0px;
 color:#fff;
 cursor:pointer;
 text-align:center;
 padding:20px 0 0 0;
 background:#b9000d;
 position:absolute;
 border-right:1px solid #740a20;
}
#idc_box dd tt.hove{
 background:#620317;
}
#hot_tag {
 position:absolute;
 padding:0 8px;
 height:50px;
 left:10px;
 top:-1px;
 border:1px solid #ccc;
}
</style>
<script type="text/javascript">
function myAddEvent(obj, sEvent, fn){
 return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);
}
function Class(oParent, sClass){
 var aElem = oParent.getElementsByTagName('*');
 var aClass = [];
 var i = 0;
 for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
 return aClass;
};
function css(obj, attr, value){
 if(arguments.length == 2){
 var style = obj.style,
 currentStyle = obj.currentStyle;
 if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];
 for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];
 }else if(arguments.length == 3){
 switch(attr){
 case "width":
 case "height":
 case "paddingTop":
 case "paddingRight":
 case "paddingBottom":
 case "paddingLeft":
 case "top":
 case "right":
 case "bottom":
 case "left":
 case "marginTop":
 case "marginRigth":
 case "marginBottom":
 case "marginLeft":
 obj.style[attr] = value + "px";
 break;
 case "opacity":
 obj.style.filter = "alpha(opacity=" + value + ")";
 obj.style.opacity = value / 100;
 break;
 default:
 obj.style[attr] = value
 }
 }
};
function extend(destination, source){
 for (var propName in source) destination[propName] = source[propName];
 return destination
};
function doMove(obj, json, fnEnd){
 clearInterval(obj.timer);
 obj.iSpeed = 0;
 fnEnd = extend({
 type: "buffer",
 callback: function() {}
 }, fnEnd);
 obj.timer = setInterval(function(){
 var iCur = 0,
 iStop = true;
 for(var propName in json){
 iCur = parseFloat(css(obj, propName));
 propName == 'opacity' && (iCur = Math.round(iCur * 100));
 switch(fnEnd.type){
 case 'buffer':
 obj.iSpeed = (json[propName] - iCur) / 5;
 obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
 json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
 break;
 case 'elasticity':
 obj.iSpeed += (json[propName] - iCur) / 5;
 obj.iSpeed *= 0.75;
 Math.abs(json[propName] - iCur) <= 1 && Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
 break;
 case 'accelerate':
 obj.iSpeed = obj.iSpeed + 5;
 iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
 break;
 }
 }
 if(iStop){
 clearInterval(obj.timer);
 obj.timer = null;
 obj.iSpeed = 0;
 fnEnd.callback();
 }
 },30);
};
</script>
<script type="text/javascript">
window.onload = function(){
 var oBox = document.getElementById('idc_box')
 var aSpan = document.getElementsByTagName('tt');
 var aLi = document.getElementsByTagName('dd');
 var playtime = null;
 var iNow = 0;
 for(i=0;i<aSpan.length;i++){
 aSpan[i].index = i;
 aSpan[i].onclick = function(){
 for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});
 for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';
 this.className = 'hove';
 doMove(this.parentNode, {width:187});
 iNow = this.index;
 };
 }
 playtime = setInterval(tab,3500);
 oBox.onmouseover = function(){
 clearInterval(playtime);
 }
 oBox.onmouseout = function(){
 playtime = setInterval(tab,3500);
 }
 function tab(){
 iNow == aLi.length-1 ? iNow = 0 : iNow++;
 aSpan[iNow].onclick();
 }
};
</script>

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

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

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

本文转自 知更鸟