首先是自己定制的脚本方法属性代码:
/* * 创建浮动图片广告(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 类网页微信二维码图块滚动效果具体实现相关文章请关注PHP中文网!