Jquery 類網(wǎng)頁(yè)微信二維碼圖塊滾動(dòng)效果具體實(shí)現(xiàn)

更新時(shí)間：2013年10月14日 16:12:11 作者：

網(wǎng)頁(yè)微信二維碼圖塊滾動(dòng)效果想必大家都有見到過吧，在接下來的文章中將為大家詳細(xì)介紹下使用Jquery是如何實(shí)現(xiàn)，感興趣的朋友可以參考下

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

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

其次是詳細(xì)效果實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

(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=\"#\"; onclick=\"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;  
        }  
        //別名不同導(dǎo)致事件驅(qū)動(dòng)不一樣：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); 

最后就是頁(yè)面的編寫：

一、導(dǎo)入自己定義的JQuery并配好head

復(fù)制代碼代碼如下:

<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代碼

復(fù)制代碼代碼如下:

<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>