首页 / WordPress入门 / 分享两个JS滑动门代码

分享两个JS滑动门代码

    • 珂李斯

    发布于

    by

    这两个滑动门特效网上淘来的，简单修改了一下，纯HTML代码构建，未加PHP函数，其中的图片和链接可自行替换，如…

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

    代码一、鼠标悬停滑动

    1. <div class=“ad”>
    2.     <div class=“box_top”>
    3.         <i class=“rt”></i>
    4.         <i class=“lt”></i>
    5.     </div>
    6.     <div class=“ads_c”>
    7.         <div class=“droplist” id=lrtk>
    8.             <dl>
    9.               <dt><p>国内主机</p></dt>
    10.               <dd><a class=hot href=“http://idc.wopus.org/” target=_blank title=“国内主机”><img src=“https://zmingcx.com/wp-content/uploads/2013/10/idc1.jpg”></a></dd>
    11.               <dt><p> 国外主机</p></dt>
    12.               <dd style=“display: none”><a class=hot href=“http://idc.wopus.org/” target=_blank title=“国外主机”><img src=“https://zmingcx.com/wp-content/uploads/2013/10/idc2.jpg”></a></dd>
    13.               <dt><p>专业博客主机</p></dt>
    14.               <dd style=“display: none”><a class=hot href=“http://idc.wopus.org/” target=_blank title=“域名注册”><img src=“https://zmingcx.com/wp-content/uploads/2013/10/idc3.jpg”></a></dd>
    15.             </dl>
    16.         </div>
    17.         <div class=“clear”></div>
    18.     </div>
    19.     <div class=“box-bottom”>
    20.         <i class=“lb”></i>
    21.         <i class=“rb”></i>
    22.     </div>
    23. </div>
    24. <style type=“text/css”>
    25. .droplist dl,.droplist dt,.droplist dd{
    26.     padding: 0px;
    27.     margin: 0px;
    28.     color: #fff;
    29.  }
    30. .droplist {
    31.     width: 230px;
    32. }
    33. .droplist dl dt {
    34.     background: #c01e22;
    35.     border-top: 1px solid #ccc;
    36.     width: 230px;
    37.     text-indent: 20px;
    38.     line-height: 29px;
    39.     height: 29px;
    40. }
    41. .droplist dl dt p {
    42.     cursor: pointer;
    43. }
    44. .droplist dl dt p.droplist-hover {
    45.     background: #910004;
    46. }
    47. .droplist dl dd {
    48.     display: none;
    49.     overflow:hidden;
    50.     width: 230px;
    51.     height: 140px;
    52. }
    53. .droplist dl dd img {
    54. }
    55. </style>
    56. <script type=“text/javascript”>
    57. $.fn.extend({
    58.    adadvance:function(){
    59.     var listobj=this;
    60.         var objs =$(‘dt’,this);
    61.     var view =objs.length-1;//parseInt( Math.random()*objs.length);
    62.     objs.each(function(i){
    63.     $(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()})
    64.     if(i!=view)
    65.     {
    66.         $(this).next().hide();
    67.     }
    68.     else
    69.     {
    70.         $(this).next().show();
    71.         $(this).children(“p”).attr(“class”,“droplist-hover”);
    72.     }
    73.     });
    74.     }
    75. });
    76. </script>
    77. <script type=text/javascript>$(‘#lrtk’).adadvance();</script>

    代码二、自动切换

    1. <div class=“ad”>
    2.     <div class=“box_top”>
    3.         <i class=“rt”></i>
    4.         <i class=“lt”></i>
    5.     </div>
    6.     <div class=“ads_c”>
    7.         <div id=“idc_box”>
    8.             <ul>
    9.                 <dd class=“hove”><tt class=“hove”>专业博客主机</tt><a href=“http://idc.wopus.org/” target=_blank title=“专业博客主机”><img src=“https://zmingcx.com/wp-content/uploads/2013/10/idc-a.jpg”></a></dd>
    10.                 <dd><tt class=“”>国外主机</tt><a href=“http://idc.wopus.org/” target=_blank title=“国外主机”><img src=“https://zmingcx.com/wp-content/uploads/2013/10/idc-c.jpg”></a></dd>
    11.                 <dd><tt class=“”>国内主机</tt><a href=“http://idc.wopus.org/” target=_blank title=“国内主机”><img src=“https://zmingcx.com/wp-content/uploads/2013/10/idc-b.jpg”></a></dd>
    12.             </ul>
    13.         </div>
    14.     </div>
    15.     <div class=“box-bottom”>
    16.         <i class=“lb”></i>
    17.         <i class=“rb”></i>
    18.     </div>
    19. </div>
    20. <style type=“text/css”>
    21. #idc_box ul, #idc_box dd, #idc_box tt{
    22.     margin:0px;
    23.     padding:0px;
    24.     float:left;
    25.     list-style: none;
    26. }
    27. #idc_box{
    28.     width:229px;
    29.     height:230px;
    30.     border-left: 1px solid #740a20;
    31. }
    32. #idc_box dd{
    33.     width:21px;
    34.     height:230px;
    35.     overflow:hidden;
    36.     position:relative;
    37. }
    38. #idc_box dd.hove{
    39.     width:187px;
    40.     text-align:right;
    41. }
    42. #idc_box dd tt{
    43.     width:20px;
    44.     height:230px;
    45.     top:0px;
    46.     left:0px;
    47.     color:#fff;
    48.     cursor:pointer;
    49.     text-align:center;
    50.     padding:20px 0 0 0;
    51.     background:#b9000d;
    52.     position:absolute;
    53.     border-right:1px solid #740a20;
    54. }
    55. #idc_box dd tt.hove{
    56.     background:#620317;
    57. }
    58. #hot_tag {
    59.     position:absolute;
    60.     padding:0 8px;
    61.     height:50px;
    62.     left:10px;
    63.     top:-1px;
    64.     border:1px solid #ccc;
    65. }
    66. </style>
    67. <script type=“text/javascript”>
    68. function myAddEvent(obj, sEvent, fn){
    69.     return obj.attachEvent ? obj.attachEvent(‘on’ + sEvent, fn) : obj.addEventListener(sEvent, fn, false);
    70. }
    71. function Class(oParent, sClass){
    72.     var aElem = oParent.getElementsByTagName(‘*’);
    73.     var aClass = [];
    74.     var i = 0;
    75.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
    76.     return aClass;
    77. };
    78. function css(obj, attr, value){
    79.     if(arguments.length == 2){
    80.         var style = obj.style,
    81.             currentStyle = obj.currentStyle;
    82.         if(typeof attr === ‘string’)return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];
    83.         for(var propName in attr)propName == ‘opacity’ ? (style.filter = “alpha(opacity=” + attr[propName] + “)”, style.opacity = attr[propName] / 100) : style[propName] = attr[propName]; 
    84.     }else if(arguments.length == 3){
    85.         switch(attr){
    86.             case “width”:
    87.             case “height”:
    88.             case “paddingTop”:
    89.             case “paddingRight”:
    90.             case “paddingBottom”:
    91.             case “paddingLeft”:
    92.             case “top”:
    93.             case “right”:
    94.             case “bottom”:
    95.             case “left”:
    96.             case “marginTop”:
    97.             case “marginRigth”:
    98.             case “marginBottom”:
    99.             case “marginLeft”:
    100.                 obj.style[attr] = value + “px”;
    101.                 break;
    102.             case “opacity”:
    103.                 obj.style.filter = “alpha(opacity=” + value + “)”;
    104.                 obj.style.opacity = value / 100;
    105.                 break;
    106.             default:
    107.                 obj.style[attr] = value
    108.         }
    109.     }
    110. };
    111. function extend(destination, source){
    112.     for (var propName in source) destination[propName] = source[propName];
    113.     return destination
    114. };
    115. function doMove(obj, json, fnEnd){
    116.     clearInterval(obj.timer);
    117.     obj.iSpeed = 0;
    118.     fnEnd = extend({
    119.         type: “buffer”,
    120.         callback: function() {}
    121.     }, fnEnd);
    122.     obj.timer = setInterval(function(){
    123.         var iCur = 0,
    124.             iStop = true;
    125.         for(var propName in json){
    126.             iCur = parseFloat(css(obj, propName));
    127.             propName == ‘opacity’ && (iCur = Math.round(iCur * 100));
    128.             switch(fnEnd.type){
    129.                 case ‘buffer’:
    130.                     obj.iSpeed = (json[propName] – iCur) / 5;
    131.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
    132.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
    133.                     break;
    134.                 case ‘elasticity’:
    135.                     obj.iSpeed += (json[propName] – iCur) / 5;
    136.                     obj.iSpeed *= 0.75;
    137.                     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));
    138.                     break;
    139.                 case ‘accelerate’:
    140.                     obj.iSpeed = obj.iSpeed + 5;
    141.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
    142.                 break;
    143.             }
    144.         }
    145.         if(iStop){
    146.             clearInterval(obj.timer);
    147.             obj.timer = null;
    148.             obj.iSpeed = 0;
    149.             fnEnd.callback();
    150.         }
    151.     },30);
    152. };
    153. </script>
    154. <script type=“text/javascript”>
    155. window.onload = function(){
    156.     var oBox = document.getElementById(‘idc_box’)
    157.     var aSpan = document.getElementsByTagName(‘tt’);
    158.     var aLi = document.getElementsByTagName(‘dd’);
    159.     var playtime = null;
    160.     var iNow = 0;
    161.     for(i=0;i<aSpan.length;i++){
    162.         aSpan[i].index = i;
    163.         aSpan[i].onclick = function(){
    164.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});
    165.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = ”;
    166.             this.className = ‘hove’;
    167.             doMove(this.parentNode, {width:187});
    168.             iNow = this.index;
    169.         };
    170.     }
    171.     playtime = setInterval(tab,3500);
    172.     oBox.onmouseover = function(){
    173.         clearInterval(playtime);
    174.     }
    175.     oBox.onmouseout = function(){
    176.         playtime = setInterval(tab,3500);
    177.     }
    178.     function tab(){
    179.         iNow == aLi.length-1 ? iNow = 0 : iNow++;
    180.         aSpan[iNow].onclick();
    181.     }
    182. };
    183. </script>

    说明：

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

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

    1. <?php include(‘abc-1.php’); ?>
    2. <?php include(‘abc-2.php’); ?>
    类别：WordPress入门、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！