Jquery 类网页微信二维码图块滚动效果具体实现_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 = "
";
var closeImgEl = "";

$(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

二、写上主体body代码