Jquery 類別網頁微信二維碼圖塊滾動效果具體實現_jquery

首先是自己自訂的腳本方法屬性碼：

複製程式碼 程式碼如下:

/*

 * 建立浮動圖片廣告（Generate a dock AD image）
 *
 * USAGE: 
 *  $(selector             //廣告圖片路徑
 *      closeSrc:null,               // 關閉圖片路徑
      // 廣告圖片連結位址
 *      autoHide:true,               //使用是否為隱藏者
         // •🎜>         //作用:10,               // 延遲隱藏秒數
 *      top:20,           top:20,           layout:"left",               // 預設影像位置：left且居左,right 置中右, center 居中,
 *      width:100,                   // 寬度 *      opacity:0.5              // 透明度中(opacity:0.5(firefox), filter:alpha(opacity=50)(
 *      setPosition:function(left, top){ // 預留自訂顯示位置的方法（尚未實作）
 *       🎜> */


其次是詳細效果實現：




複製程式碼

程式碼如下:

(函數($){ 
    $.fn.ad = 函數($){ 
             var 設定= $.extend({ 
            src:null,                              
            href來說:"#",              hideSecond:10, 
           位置: "「頂部頂部頂部頂部頂部頂部頂部",              
            頂部:20,     
            底部:20,                  
            佈局:"左",                
            寬度:100,                    
            高度:100,                  
            不透明度:0.5, 
設定位置:function(left, top){ 
               return; 
       🎜>        if(settings.src && settings.closeSrc){       
            var imgEl =“
"; 
           var closeImgEl = ""; 

            $( this).append(imgElcloseImgEl); ).css( "position","absolute"); 
            if(settings.position=='top'){ 
      ); >            } else { 
               $(this).css("bottom",settings.bottom "px");       
            $(this).css("opacity",settings.opacity); 
            $(this).css("filter","alpha(opacity=" parseInt(settings.opacity * 100)  ")"); 

            switch(settings.layout) { 
                  $(this).css("left","-100px"); 
                             $(this).css("right","-100px"); 
                             var left = (parseInt(window.screen.availWidth) - parseInt(settings.width))/2 "px"; 
                    $(this).css("left",left); 
                    休息中； 
                 $(this).css("left","-100px"); 
                    休息； 
            } 
        } else { 
            返回； 
        } 

        if (settings.autoHide) { 
            setTimeout("(function(){$( '" $(this).selector   "').hide();})() ;",parseInt(settings.hideSecond) * 1000; 
        } 與onscroll 
        $(window).bind("scroll", function(){
           document.documentElement.scrollTop) 
               diffY = document.documentElement 。 scrollTop; 
            else if (document.body) 
         }         else { 
                    
            percent= 1 * (diffY - lastScrollY); 
          percent=Math.ceil(percent); 
            else  
         

            if(settings.position=='top'){ 
                    czd.css("top", parseInt(top) percent " px"); 
                lastScrollY = percent; 
          var top = czd.css("bottom"); 

               czd.css("bottom", parseInt(top) - percent "px");lastScrollY = percent; 
            } 

      );); >

最後就是頁面的編寫：


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

複製程式碼

程式碼如下:

> 
         🎜 >         
        $(document).ready(function(){ 
               src:"/ images/qrcode.png",
                closeSrc:"/images/closeAd.gif autoHide:false,                
                             上方:480,  
                佈局:"左",                              
                              不透明度:5 
                });                               closeSrc:"/images/closeAd.gif",           ... .",                     
                autoHide:false,               
                hideSecond:5,                
                頂部:-70,                      
                佈局:"左",                
                寬度:100,                    
                高度:500 },                
                ）； 
            $("#right").ad({ 
                             
           
   >; /images/closeAd.gif",        
               href:"......",                    
                autoHide:false,                
        
                hideSecond:5,                
                top:-70,                       
                佈局:"右",                
               寬度:100,                   
                高度:500,                  
                不透明度:5 
            }); 
        }); 

腳本>

二、寫上主體程式碼複製程式碼

程式碼如下：

 
         

 

 "%> 
     

; 

       

 
           

 
             
           

 

          

                     

; 
                       

; 

           

; 
           

 
                

 
           

 
        
     

；