倉藍
          
				
          日記本
          
			          		
		
          
	
          

          

          
	
          
		
          
			
				
 
BlogJava ::
首頁 ::
聯系 ::
聚合
 ::
管理

			
			
			
				

	
          
		
          
			
			
			
				 
				23 
				Posts ::
				0 Stories
				::
				1 Comments
				::
				0 Trackbacks
			
		
          
	
          

			          		
		
          
	
          

          


          

          
	
          
	
					

          
			
	
	
          
		
          本文介紹一組適用于在Wordpress側欄放置的圖片廣告輪播（js）代碼：可自動播放，同時響應訪客的點擊
          1.樣式表
           
            
          1. /*SidebarTabsAd*/  
          2. #cwpad_box{width:100%;text-align:center}   
          3. #cwpad_box ul, #cwpad_box dd, #cwpad_box tt{   
          4.     margin:0px;   
          5.     padding:0px;   
          6.     float:left;   
          7.     list-style: none;   
          8. }   
          9. #cwpad_box{   
          10.     width:313px;/*250px+(n-1)*21px*/  
          11.     height:250px;   
          12.     border-left: 1px solid #740a20;   
          13. }   
          14. #cwpad_box dd{   
          15.     width:21px;   
          16.     height:250px;   
          17.     overflow:hidden;   
          18.     position:relative;   
          19. }   
          20. #cwpad_box dd.hove{   
          21.     width:250px;   
          22.     text-align:rightright;   
          23. }   
          24. #cwpad_box dd tt{   
          25.     width:20px;   
          26.     height:250px;   
          27.     top:0px;   
          28.     left:0px;   
          29.     color:#fff;   
          30.     cursor:pointer;   
          31.     text-align:center;   
          32.     padding:20px 0 0 0;   
          33.     background:#b9000d;   
          34.     position:absolute;   
          35.     border-right:1px solid #740a20;   
          36. }   
          37. #cwpad_box dd tt.hove{   
          38.     background:#620317;   
          39. }  
           
           
          在上面的樣式表中，假設放置的是四個250px*250px的圖片廣告，所以250+（4-1）*21=313px。
           
          2.javascript代碼
           
            
          1. <script type="text/javascript">   
          2. function myAddEvent(obj, sEvent, fn){   
          3.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);   
          4. }   
          5. function Class(oParent, sClass){   
          6.     var aElem = oParent.getElementsByTagName('*');   
          7.     var aClass = [];   
          8.     var i = 0;   
          9.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);   
          10.     return aClass;   
          11. };   
          12. function css(obj, attr, value){   
          13.     if(arguments.length == 2){   
          14.         var style = obj.style,   
          15.             currentStyle = obj.currentStyle;   
          16.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];   
          17.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];    
          18.     }else if(arguments.length == 3){   
          19.         switch(attr){   
          20.             case "width":   
          21.             case "height":   
          22.             case "paddingTop":   
          23.             case "paddingRight":   
          24.             case "paddingBottom":   
          25.             case "paddingLeft":   
          26.             case "top":   
          27.             case "right":   
          28.             case "bottom":   
          29.             case "left":   
          30.             case "marginTop":   
          31.             case "marginRigth":   
          32.             case "marginBottom":   
          33.             case "marginLeft":   
          34.                 obj.style[attr] = value + "px";   
          35.                 break;   
          36.             case "opacity":   
          37.                 obj.style.filter = "alpha(opacity=" + value + ")";   
          38.                 obj.style.opacity = value / 100;   
          39.                 break;   
          40.             default:   
          41.                 obj.style[attr] = value   
          42.         }   
          43.     }   
          44. };   
          45. function extend(destination, source){   
          46.     for (var propName in source) destination[propName] = source[propName];   
          47.     return destination   
          48. };   
          49. function doMove(obj, json, fnEnd){   
          50.     clearInterval(obj.timer);   
          51.     obj.iSpeed = 0;   
          52.     fnEnd = extend({   
          53.         type: "buffer",   
          54.         callback: function() {}   
          55.     }, fnEnd);   
          56.     obj.timer = setInterval(function(){   
          57.         var iCur = 0,   
          58.             iStop = true;   
          59.         for(var propName in json){   
          60.             iCur = parseFloat(css(obj, propName));   
          61.             propName == 'opacity' && (iCur = Math.round(iCur * 100));   
          62.             switch(fnEnd.type){   
          63.                 case 'buffer':   
          64.                     obj.iSpeed = (json[propName] - iCur) / 5;   
          65.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);   
          66.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          67.                     break;   
          68.                 case 'elasticity':   
          69.                     obj.iSpeed += (json[propName] - iCur) / 5;   
          70.                     obj.iSpeed *= 0.75;   
          71.                     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));   
          72.                     break;   
          73.                 case 'accelerate':   
          74.                     obj.iSpeed = obj.iSpeed + 5;   
          75.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          76.                 break;   
          77.             }   
          78.         }   
          79.         if(iStop){   
          80.             clearInterval(obj.timer);   
          81.             obj.timer = null;   
          82.             obj.iSpeed = 0;   
          83.             fnEnd.callback();   
          84.         }   
          85.     },30);   
          86. };   
          87.   
          88. window.onload = function(){   
          89.     var oBox = document.getElementById('cwpad_box')   
          90.     var aSpan = document.getElementsByTagName('tt');   
          91.     var aLi = document.getElementsByTagName('dd');   
          92.     var playtime = null;   
          93.     var iNow = 0;   
          94.     for(i=0;i<aSpan.length;i++){   
          95.         aSpan[i].index = i;   
          96.         aSpan[i].onclick = function(){   
          97.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});   
          98.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';   
          99.             this.className = 'hove';   
          100.             doMove(this.parentNode, {width:250});   
          101.             iNow = this.index;   
          102.         };   
          103.     }   
          104.     playtime = setInterval(tab,3500);   
          105.     oBox.onmouseover = function(){   
          106.         clearInterval(playtime);   
          107.     }   
          108.     oBox.onmouseout = function(){   
          109.         playtime = setInterval(tab,3500);   
          110.     }   
          111.     function tab(){   
          112.         iNow == aLi.length-1 ? iNow = 0 : iNow++;   
          113.         aSpan[iNow].onclick();   
          114.     }   
          115. };   
          116.  </script>    
           
           
           
            
             
           
          3.示例的HTML代碼
           
            
          1. <div id="cwpad_box">  
          2.     <ul>  
          3.         <dd  class="hove">  
          4.         <tt class="hove">網站設計及培訓</tt>  
          5.         <a ></a>  
          6.         </dd>  
          7.     </ul>  
          8. </div>  
           
           
          使用的是索凌網絡前面介紹過的"假圖"生成網站fakeimg.pl生成的"假圖"。
           
          這組代碼的一個顯著缺點是：不適合移動設備顯示。
          
	
          
	
	
          
		posted on 2013-12-31 11:30 cangshi 閱讀(293) 評論(0)  編輯  收藏  所屬分類: php 、wordpress 
	
          

          







          
	    
    




          








          

				

          

          




    







          
        
	




主站蜘蛛池模板：
九台市|
奉新县|
黑河市|
股票|
安丘市|
舞钢市|
永靖县|
山阳县|
互助|
桑日县|
揭东县|
石首市|
陵川县|
林周县|
东乡县|
昆明市|
会昌县|
措勤县|
霍邱县|
隆子县|
安国市|
无棣县|
裕民县|
东平县|
永善县|
镇沅|
清原|
聊城市|
揭东县|
浦县|
萨迦县|
略阳县|
崇信县|
莫力|
玛纳斯县|
肃宁县|
武功县|
澄迈县|
诏安县|
呼和浩特市|
安徽省|