Jquery 类网页微信二维码图块滚动效果具体实现_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;
 *      }   
 *  })
 */

其次是详细效果实现：

复制代码 代码如下:

(函数($){ 
    $.fn.ad = 函数(选项){ 
        var lastScrollY= 0; 
        var czd = $(this); 
        var 设置= $.extend({ 
            src:null,                    
            closeSrc:null,                
            href:"#", 
            autoHide:true,                
            hideSecond:10, 
            位置: "顶部",              
           顶部:20,     
            底部:20,                  
            布局:"左",                
            宽度:100,                    
            高度:100,                  
            不透明度:0.5, 
            设置位置:function(left, top){ 
               return; 
           } 
        },选项 || {}); 

        if(settings.src && settings.closeSrc){       
            var imgEl =“
"; 
            var closeImgEl = ""; 

            $( 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"); 
                    休息； 
                case "right": 
                    $(this).css("right","-100px"); 
                    休息； 
                case "center": 
                    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; 
        } 
        //另外不同导致事件驱动不一样：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 内容*/ 
                } 
            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

复制代码 代码如下:

> 
         
         
        $(document).ready(function(){ 
            $("#leftbelow").ad({ 
                src:"/images/qrcode.png",
                closeSrc:"/images/closeAd.gif",        
               autoHide:false,                
                hideSecond :5,                
                顶部:480,  
                布局:"左",                
                宽度:100,                   
                高度:100,                  
                不透明度:5 
                }); 

            $("#left").ad({ 
                src: "<%=basePath%>/images/longtentianxia20131010.jpg",                    
               closeSrc:"<%=basePath%>/images/closeAd.gif",                
                href:“...... .",                     
                autoHide:false,               
                hideSecond:5,                
                顶部:-70,                      
                布局:"左",                
                宽度:100,                    
                高度:500 ,                
                不透明度:5  
            }）； 
            $("#right").ad({ 
                src:"<%=basePath%>/images/yingxiaodasai201203012.jpg",                   
           
                closeSrc:"; /images/closeAd.gif",        
               href:"......",                    
                autoHide:false,                
        
                hideSecond:5,                
                top:-70,                       
                布局:"右",                
               宽度:100,                   
                高度:500,                  
                不透明度:5 
            }); 
        }); 

二、写上主体代码复制代码

代码如下：

 
         

 

       
     

; 

       

 
           

 
                 
           

 
           

 

                       

; 

                     

                       

; 
                       

; 

           

; 
           

 
                 
           

 
           

; 
                 
           

 
       

; 
     

;