/* * 创建浮动图片广告（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"> <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>
更多jquery 类网页微信二维码图块滚动效果具体实现。