Jquery-like web page WeChat QR code block scrolling effect specific implementation_jquery

First is the customized script method attribute code:

Copy the code The code is as follows:

/*
* Create a dock AD image
*
* USAGE:
* $(selector).higo_plugins_ad({
* src:null, // Advertisement image path
* closeSrc:null, // Close image path
* href:"#", // Advertisement image link address
* autoHide:true, // Whether to automatically hide
* hideSecond :10,               // 延迟隐藏秒数
 *      top:20,                      // 距离顶部偏移高度
 *      layout:"left",               // 默认图片位置：left 居左,right 居右, center 居中,
* width:100,                                                                                                                                                                                                                                . fox), filter:alpha(opacity=50)(IE)
* setPosition:function(left, top){ // Method to reserve a custom display position (not yet implemented)
* * return;
* * } }
* })
*/


The second is the detailed effect implementation:

Copy the code The code is as follows:

(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 = "
"; 
            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"); 
                    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=Math.floor(percent);

if(settings.position=='top'){
var top = czd.css("top");
czd.css("top", parseInt(top) percent " px");
lastScrollY = percent;
czd.css("bottom", parseInt(top) - percent "px"); lastScrollY = percent; It’s the writing of the page:


1. Import your own defined JQuery and configure the head




Copy the code


The code is as follows:

 
         
       

二、写上主体body代码

复制代码 代码如下:

 
         

 

      <%@include file="/page/public/sideBar.jsp"%> 
     

 

       

 
           

 
                <%@include file="/page/public/top.jsp"%> 
           

 
           

 

                       

 

                     

                       

 
                       

 

           

 
           

 
                <%@include file="/page/public/bottom.jsp"%>