Jquery 類網頁微信二維碼圖塊滾動效果

首先是自己定製的腳本方法屬性代碼：

/*
 * 創建浮動圖片廣告（Generate a dock AD image）
 *
 * USAGE: 
 *	$(selector).higo_plugins_ad({
 *		src:null,                    // 廣告圖片路徑
 *		closeSrc:null,               // 關閉圖片路徑
 *		href:"#",                    // 廣告圖片鏈接地址
 *		autoHide:true,               // 是否自動隱藏
 *		hideSecond:10,               // 延遲隱藏秒數
 *		top:20,                      // 距離頂部偏移高度
 *		layout:"left",               // 默認圖片位置：left 居左 ,right 居右, center 居中, 
 *		width:100,                   // 寬度
 *		height:100,                  // 高度
 *		opacity:0.5	             // 透明度opacity:0.5(firefox), filter:alpha(opacity=50)(IE)
 *		setPosition:function(left, top){ // 預留自定義顯示位置的方法（尚未實現）
 *			return;
 *		}	
 *	})
 */

其次是詳細效果實現：

(function($){
	$.fn.ad = function(options){
		var lastScrollY= 0;
		var czd = $(this);
		var settings = $.extend({
			src:null,                    
			closeSrc:null,               
			href:"#",
			autoHide:true,               
			hideSecond:10,
			position: "top",             
			top:20,    
			bottom:20,                  
			layout:"left",               
			width:100,                   
			height:100,                  
			opacity:0.5,
			setPosition:function(left, top){
				return;
			}
		},options || {});
		
		if(settings.src && settings.closeSrc){		
			var imgEl = "<a href='" + settings.href + "' target='_blank'><img border=0 width='" + settings.width + "px' height='" + settings.height + "px' src='" + settings.src + "'/> <br></a>";
			var closeImgEl = "<a href=\"#\"; οnclick=\"this.parentElement.style.visibility='hidden'\"><img border=0 src='" + settings.closeSrc +"'/></a>";
			
			$(this).append(imgEl + closeImgEl);
			
			$(this).css("position","absolute");
			if(settings.position=='top'){
				$(this).css("top",settings.top + "px");
			} else {
				$(this).css("bottom",settings.bottom + "px");
			}
			$(this).css("opacity",settings.opacity);
			$(this).css("filter","alpha(opacity=" + parseInt(settings.opacity * 100)  + ")");
			
			switch(settings.layout) {
				case "left":
					$(this).css("left","-100px");
					break;
				case "right":
					$(this).css("right","-100px");
					break;
				case "center":
					var left = (parseInt(window.screen.availWidth) - parseInt(settings.width))/2 + "px";
					$(this).css("left",left);
					break;
				default:
					$(this).css("left","-100px");
					break;
			}
		} else {
			return;
		}
		
		if(settings.autoHide) {
			setTimeout("(function(){$('" + $(this).selector +  "').hide();})();",parseInt(settings.hideSecond) * 1000;
		}
		//別名不同導致事件驅動不一樣：scroll與onscroll
		$(window).bind("scroll", function(){
			var diffY;
			if (document.documentElement && document.documentElement.scrollTop)
				diffY = document.documentElement.scrollTop;
			else if (document.body)
				diffY = document.body.scrollTop
				else {
					/*Netscape stuff*/
				}
			percent= 1 * (diffY - lastScrollY);
			if(percent>0)
				percent=Math.ceil(percent);
			else 
				percent=Math.floor(percent);
			
			if(settings.position=='top'){
				var top = czd.css("top");
				czd.css("top", parseInt(top) + percent + "px");
				lastScrollY += percent;
			} else {
				var top = czd.css("bottom");
				
				czd.css("bottom", parseInt(top) - percent + "px");lastScrollY += percent;
			}
				
		});
	}
})(jQuery);

最後就是頁面的編寫：

一、導入自己定義的JQuery並配好head

<decorator:head />
		<script type="text/javascript" src="<%=basePath%>js/jquery.czd_plugins_ad.js"></script>
		<script language="javascript">
		$(document).ready(function(){
    		$("#leftbelow").ad({
    			src:"<%=basePath%>/images/qrcode.png",                  
    			closeSrc:"<%=basePath%>/images/closeAd.gif",       
    			autoHide:false,               
    			hideSecond:5,               
    			top:480, 
    			layout:"left",               
    			width:100,                   
    			height:100,                 
    			opacity:5
    			});
    		
    		$("#left").ad({
        		src:"<%=basePath%>/images/longtentianxia20131010.jpg",                    
        		closeSrc:"<%=basePath%>/images/closeAd.gif",               
        		href:"......",                    
        		autoHide:false,               
        		hideSecond:5,               
        		top:-70,                      
        		layout:"left",               
        		width:100,                   
        		height:500 ,               
        		opacity:5 
    		});
    		$("#right").ad({
        		src:"<%=basePath%>/images/yingxiaodasai201203012.jpg",                  
        		closeSrc:"<%=basePath%>/images/closeAd.gif",       
        		href:"......",                    
        		autoHide:false,               
        		hideSecond:5,               
        		top:-70,                      
        		layout:"right",               
        		width:100,                   
        		height:500,                 
        		opacity:5
    		});
    	});
</script>

二、寫上主體body代碼

<body class="homeBackgroup">
          <div id="center"> </div>
	 
	  <%@include file="/page/public/sideBar.jsp"%>
	  <div class="shadow">
	     
		<div id="container">
			<div id="header">
				<%@include file="/page/public/top.jsp"%>
			</div>
			<div id="mainContent">
      
              			<div id="left"></div>
              
	      			<decorator:body />
              
              			<div id="right"></div>
              			<div id="leftbelow"></div>
              
			</div>
			<div id="footer" >
				<%@include file="/page/public/bottom.jsp"%>
			</div>
			<div id="back-top">
			    <a href="#top"><span></span></a>
			</div>
		</div>
	  </div>	
</body>