分享两个JS滑动门代码

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

代码一、鼠标悬停滑动

  1. <div =>
  2.     <div =>
  3.         <i =></i>
  4.         <i =></i>
  5.     </div>
  6.     <div =>
  7.         <div = id=lrtk>
  8.             <dl>
  9.               <dt><p>国内主机</p></dt>
  10.               <dd><a =hot href= target=_blank title=><img src=></a></dd>
  11.               <dt><p> 国外主机</p></dt>
  12.               <dd style=><a =hot href= target=_blank title=><img src=></a></dd>
  13.               <dt><p>专业博客主机</p></dt>
  14.               <dd style=><a =hot href= target=_blank title=><img src=></a></dd>
  15.             </dl>
  16.         </div>
  17.         <div =></div>
  18.     </div>
  19.     <div =>
  20.         <i =></i>
  21.         <i =></i>
  22.     </div>
  23. </div>
  24. <style type=>
  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=>
  57. $.fn.extend({
  58.    adadvance:(){
  59.      listobj=this;
  60.          objs =$(\’dt\’,this);
  61.      view =objs.length-1;
  62.     objs.each((i){
  63.     $(this).mouseover((){ $(\’dd\’,listobj).hide();$(\’.droplist-hover\’,listobj).attr(,);$().fadeIn(1000);$(this).children().attr(,);$(this).next().show()})
  64.     (i!=view)
  65.     {
  66.         $(this).next().hide();
  67.     }
  68.     
  69.     {
  70.         $(this).next().show();
  71.         $(this).children().attr(,);
  72.     }
  73.     });
  74.     }
  75. });
  76. </script>
  77. <script type=text/javascript>$(\’#lrtk\’).adadvance();</script>

代码二、自动切换

  1. <div =>
  2.     <div =>
  3.         <i =></i>
  4.         <i =></i>
  5.     </div>
  6.     <div =>
  7.         <div id=>
  8.             <ul>
  9.                 <dd =><tt =>专业博客主机</tt><a href= target=_blank title=><img src=></a></dd>
  10.                 <dd><tt =>国外主机</tt><a href= target=_blank title=><img src=></a></dd>
  11.                 <dd><tt =>国内主机</tt><a href= target=_blank title=><img src=></a></dd>
  12.             </ul>
  13.         </div>
  14.     </div>
  15.     <div =>
  16.         <i =></i>
  17.         <i =></i>
  18.     </div>
  19. </div>
  20. <style type=>
  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=>
  68.  myAddEvent(obj, sEvent, fn){
  69.      obj.attachEvent ? obj.attachEvent(\’on\’ + sEvent, fn) : obj.addEventListener(sEvent, fn, false);
  70. }
  71.  Class(oParent, sClass){
  72.      aElem = oParent.getElementsByTagName(\’*\’);
  73.      aClass = [];
  74.      i = 0;
  75.     (i=0;i<aElem.length;i++)(aElem[i].className == sClass)aClass.push(aElem[i]);
  76.      aClass;
  77. };
  78.  css(obj, attr, value){
  79.     (arguments.length == 2){
  80.          style = obj.style,
  81.             currentStyle = obj.currentStyle;
  82.         (typeof attr === \’string\’) currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];
  83.         ( propName in attr)propName == \’opacity\’ ? (style.filter =  + attr[propName] + , style.opacity = attr[propName] / 100) : style[propName] = attr[propName]; 
  84.     } (arguments.length == 3){
  85.         (attr){
  86.              :
  87.              :
  88.              :
  89.              :
  90.              :
  91.              :
  92.              :
  93.              :
  94.              :
  95.              :
  96.              :
  97.              :
  98.              :
  99.              :
  100.                 obj.style[attr] = value + ;
  101.                 ;
  102.              :
  103.                 obj.style.filter =  + value + ;
  104.                 obj.style.opacity = value / 100;
  105.                 ;
  106.             :
  107.                 obj.style[attr] = value
  108.         }
  109.     }
  110. };
  111.  extend(destination, source){
  112.      ( propName in source) destination[propName] = source[propName];
  113.      destination
  114. };
  115.  doMove(obj, json, fnEnd){
  116.     clearInterval(obj.timer);
  117.     obj.iSpeed = 0;
  118.     fnEnd = extend({
  119.         type: ,
  120.         callback: () {}
  121.     }, fnEnd);
  122.     obj.timer = setInterval((){
  123.          iCur = 0,
  124.             iStop = true;
  125.         ( propName in json){
  126.             iCur = parseFloat(css(obj, propName));
  127.             propName == \’opacity\’ && (iCur = Math.(iCur * 100));
  128.             (fnEnd.type){
  129.                  \’buffer\’:
  130.                     obj.iSpeed = (json[propName] – iCur) / 5;
  131.                     obj.iSpeed = obj.iSpeed > 0 ? Math.(obj.iSpeed) : Math.(obj.iSpeed);
  132.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
  133.                     ;
  134.                  \’elasticity\’:
  135.                     obj.iSpeed += (json[propName] – iCur) / 5;
  136.                     obj.iSpeed *= 0.75;
  137.                     Math.(json[propName] – iCur) <= 1 &&  Math.(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
  138.                     ;
  139.                  \’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.                 ;
  143.             }
  144.         }
  145.         (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=>
  155. window.onload = (){
  156.      oBox = document.getElementById(\’idc_box\’)
  157.      aSpan = document.getElementsByTagName(\’tt\’);
  158.      aLi = document.getElementsByTagName(\’dd\’);
  159.      playtime = null;
  160.      iNow = 0;
  161.     (i=0;i<aSpan.length;i++){
  162.         aSpan[i].index = i;
  163.         aSpan[i].onclick = (){
  164.             ( len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});
  165.             ( 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 = (){
  173.         clearInterval(playtime);
  174.     }
  175.     oBox.onmouseout = (){
  176.         playtime = setInterval(tab,3500);
  177.     }
  178.      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 (\’abc-1.php\’); ?>
  2. <?php (\’abc-2.php\’); ?>
    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞0 分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容