WordPress的两个JS滑动门代码 – WordPress 教程

这两个滑动门特效网上淘来的，简单修改了一下，纯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 class=hot href="http://idc.wopus.org/" target=_blank title="国内主机"><img src="https://xingkongweb.com/wp-content/uploads/2013/10/idc1.jpg" alt="Wordpress的两个JS滑动门代码 – WordPress 教程"></a></dd>              <dt><p> 国外主机</p></dt>              <dd style="display: none"><a class=hot href="http://idc.wopus.org/" target=_blank title="国外主机"><img src="https://xingkongweb.com/wp-content/uploads/2013/10/idc2.jpg" alt="Wordpress的两个JS滑动门代码 – WordPress 教程"></a></dd>              <dt><p>专业博客主机</p></dt>              <dd style="display: none"><a class=hot href="http://idc.wopus.org/" target=_blank title="域名注册"><img src="https://xingkongweb.com/wp-content/uploads/2013/10/idc3.jpg" alt="Wordpress的两个JS滑动门代码 – WordPress 教程"></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>

代码二、自动切换

<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="https://xingkongweb.com/wp-content/uploads/2013/10/idc-a.jpg" alt="Wordpress的两个JS滑动门代码 – WordPress 教程"></a></dd>                <dd><tt class="">国外主机</tt><a href="http://idc.wopus.org/" target=_blank title="国外主机"><img src="https://xingkongweb.com/wp-content/uploads/2013/10/idc-c.jpg" alt="Wordpress的两个JS滑动门代码 – WordPress 教程"></a></dd>                <dd><tt class="">国内主机</tt><a href="http://idc.wopus.org/" target=_blank title="国内主机"><img src="https://xingkongweb.com/wp-content/uploads/2013/10/idc-b.jpg" alt="Wordpress的两个JS滑动门代码 – WordPress 教程"></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'); ?>