Page Web Jquery WeChat QR code bloc effet de défilement implémentation spécifique

Le premier est le code d'attribut de la méthode de script personnalisé :

/* 
 * 创建浮动图片广告（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; 
 *      }    
 *  }) 
 */

Le second est la mise en œuvre détaillée de l'effet :

(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=&#39;" + settings.href + "&#39; target=&#39;_blank&#39;><img border=0 width=&#39;" + settings.width + "px&#39; height=&#39;" + settings.height + "px&#39; src=&#39;" + settings.src + "&#39;/> <br></a>";  
            var closeImgEl = "<a href=\"#\"; onclick=\"this.parentElement.style.visibility=&#39;hidden&#39;\"><img border=0 src=&#39;" + settings.closeSrc +"&#39;/></a>";  

            $(this).append(imgEl + closeImgEl);  

            $(this).css("position","absolute");  
            if(settings.position==&#39;top&#39;){  
                $(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(){$(&#39;" + $(this).selector +  "&#39;).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==&#39;top&#39;){  
                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);

Le dernier est l'écriture de la page :

1, importez votre propre JQuery défini et configurez la tête

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

2. Écrivez le code du corps principal

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

Plus de pages Web de type Jquery Tuile de code QR WeChat l'effet de défilement est implémenté en détail Pour les articles connexes, veuillez faire attention au site Web PHP chinois !