js多屏纵横向切换多图广告特效

  • A+
所属分类：wordpress

从 知更鸟 扒下来的，请知更鸟勿怪 啊~~

做图片展示或者广告都不错~~~能力有限，代码扒的可能不够完善，请自己谨慎使用。

1.纵向

效果：

代码：展开

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

隐藏的文字

 

2.横向
效果：

代码：展开

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

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: