WordPress的两个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 class=hot href=\"http://idc.wopus.org/\" target=_blank title=\"国内主机\"><img src=\"https://xingkongweb.com/wp-content/uploads/2013/10/idc1.jpg\"></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\"></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\"></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\"></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\"></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\"></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\'); ?>

!

也想出现在这里？ 联系我们吧