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;
 *      }   
 *  })
 */

其次是详细效果实现：

. 代码如下:

(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; 
        } 
        //别名不同导致事件驱动不一样：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);

最后就是页面的编写：

 

一、导入自己定义的jquery并配好head

. 代码如下:

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

. 代码如下:

<body class="homebackgroup"> 
          <p id="center"> </p> 

      <%@include file="/page/public/sidebar."%> 
      <p class="shadow"> 

        <p id="container"> 
            <p id="header"> 
                <%@include file="/page/public/top.jsp"%> 
            </p> 
            <p id="maincontent"> 

                        <p id="left"></p> 

                    <decorator:body /> 

                        <p id="right"></p> 
                        <p id="leftbelow"></p> 

            </p> 
            <p id="footer" > 
                <%@include file="/page/public/bottom.jsp"%> 
            </p> 
            <p id="back-top"> 
                <a href="#top"><span></span></a> 
            </p> 
        </p> 
      </p>   
</body>