首先是自己定制的脚本方法属性代码：
[url=] 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);
[b]最后就是页面的编写：[/b]
一、导入自己定义的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>
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
