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>