分享两个JS滑动门代码

知更鸟
知更鸟
站长
2449
文章
0
粉丝
WordPress433,735阅读模式

这两个滑动门特效网上淘来的，简单修改了一下，纯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'); ?>

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

小驼16让小米直接升级到17
正确配置WordPress调试模式
WordPress 随机文章时间
修改WordPress媒体文件的上传时间和路径
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • WordPress
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  43  访客  37  作者  4
    • yumanutong
      yumanutong 6
      1F
      回复

      我要不要告诉你，我前段时间就仿下了代码呢？哈哈

      • 轻微生活
        轻微生活 1
        2F
        回复

        其实之前在访问博客的时候就发现了，非常好看，非常喜欢，后来就借用了测试，还真成功了，不过图片素材暂缺。支持支持

        • yumanutong
          yumanutong 6
          3F
          回复

          鸟哥，我又来反馈BUG了，就是侧边这种跟随广告，我放了一个这样的代码：几个描述文字，下面用个二维码图片，结果在文章页面，不能拖到最下面，也就是会反弹上来，最下面的那个部分无法滑动下去，但是去掉那个文字就可以了，具体是什么原因造成我不知道，你看看咯！

            • 知更鸟
              知更鸟
              B1
              回复

              @ yumanutong 自己乱改页脚结构造成的，用原主题footer文件替换就正常了

                • yumanutong
                  yumanutong 6
                  B2
                  回复

                  @ 知更鸟 好吧，也许吧，反正我用纯图片了，你要不试试在图片之外加个文字试试看？

              • 我爱上QQ
                我爱上QQ 6
                4F
                回复

                这个效果不错，赞…

                • 爱萌宠
                  爱萌宠 1
                  5F
                  回复

                  很喜欢这个效果。

                  • aunsen
                    aunsen 5
                    6F
                    回复

                    鸟哥V5鸟哥87

                    • 撩闲爱迪生
                      撩闲爱迪生 2
                      7F
                      回复

                      鸟哥，你的留言框是怎么做得到的啊，主题默认的很不美观呢，想改一下

                      • Win7en乐园
                        Win7en乐园 8
                        8F
                        回复

                        鸟哥，还在吗？好久没来看望了

                        • 狂人日记
                          狂人日记 2
                          9F
                          回复

                          有技术，愿意分享，哈哈。

                          • WordPress主题
                            WordPress主题 5
                            10F
                            回复

                            好东西。。。

                            • WordPress主题
                              WordPress主题 5
                              11F
                              回复

                              鸟哥的百度站内搜索貌似不管用

                              • Win7en乐园
                                Win7en乐园 8
                                12F
                                回复

                                很棒啊，看上去！

                                • 春熙博客
                                  春熙博客 4
                                  13F
                                  回复

                                  过来看看了 期待

                                  • 番茄
                                    番茄 2
                                    14F
                                    回复

                                    这效果不错，折腾看看。

                                    • 高磊
                                      高磊 0
                                      15F
                                      回复

                                      经典的代码

                                      • 两天
                                        两天 6
                                        16F
                                        回复

                                        之前我查看过源码

                                        • 随缘的天空
                                          随缘的天空 0
                                          17F
                                          回复

                                          我想要更改滑动门的宽度变的更宽以便和我的主题侧边更搭，需要更改什么呢

                                          • 唯美的句子
                                            唯美的句子 1
                                            18F
                                            回复

                                            学习了

                                            • 我爱上QQ
                                              我爱上QQ 6
                                              19F
                                              回复

                                              现在好流行用新浪微博做图床额，嘿嘿…

                                              • 网趣网
                                                网趣网 0
                                                20F
                                                回复

                                                你好,请问下为什么我的网站是全部加载了才显示呢?不能加载一点显示一点吗

                                                • simonxu1207
                                                  simonxu1207 0
                                                  21F
                                                  回复

                                                  测试图片

                                                  • 老董
                                                    老董 0
                                                    22F
                                                    回复

                                                    第二个不错，适合侧边使用。

                                                    • loading
                                                      loading 2
                                                      23F
                                                      回复

                                                      这个主题的文章里图片显示不全，如何解决？ 我看你这里显示没有问题啊，请教一下

                                                      • 银鸥
                                                        银鸥 0
                                                        24F
                                                        回复

                                                        小站过来看看。学习学习

                                                        • kpopcomedy
                                                          kpopcomedy 6
                                                          25F
                                                          回复

                                                          鸟哥，页面旁边的广告位能否扩大？现在的230×230有点尴尬，扩到300显示效果会更好

                                                          • 营销资源网
                                                            营销资源网 3
                                                            26F
                                                            回复

                                                            鸟哥，你的文章现在更新的不太勤，每天过来想看看有没有新的内容或者技术文，但是很失望……

                                                            • 爱浮夸
                                                              爱浮夸 1
                                                              27F
                                                              回复

                                                              咋没个演示效果看看呀。。

                                                              • sinseco
                                                                sinseco 0
                                                                28F
                                                                回复

                                                                鸟哥调用不显示是怎么回事

                                                                • hanggecrazy
                                                                  hanggecrazy 0
                                                                  29F
                                                                  回复

                                                                  鸟哥这段代码在chrome下兼容性有待完善。

                                                                  • 智享互联
                                                                    智享互联 3
                                                                    30F
                                                                    回复

                                                                    看喜欢的人挺多，试试去。

                                                                  匿名

                                                                  发表评论

                                                                  匿名网友

                                                                  拖动滑块以完成验证