Jquery のような Web ページ WeChat QR コード ブロックのスクロール効果固有の実装_jquery

最初は、カスタマイズされたスクリプト メソッドの属性コードです:

コードをコピーします コードは次のとおりです:

/*
* ドック AD イメージを作成します
*
* USAGE:
* $(selector).higo_plugins_ad({
* src:null, // 広告画像パス
* closeSrc:null, // 画像パスを閉じる
* href:"#", // 広告画像リンクアドレス
* autoHide:true, // 自動的に非表示にするかどうか
* hideSecond :10 , // 延迟隐藏秒数
* top:20, // 距離离顶部偏移高さ
* layout:"left", //画像位置：左居左、右居右、中央居中、
* 幅:100、 . =50)(IE)
* setPosition:function(left, top){ // カスタム表示位置を予約するメソッド (未実装)
* * return;
* * } }
* })
*/


2 番目は詳細なエフェクトの実装です:

コードをコピーします コードは次のとおりです:

(function($){
$.fn.ad = function(options){
var lastScrollY= 0;
var czd = $(this);
var 設定= $.extend({
src:null,
closeSrc:null,
href:"#",
autoHide:true,
hideSecond:10,
位置: "トップ",
上:20,
下:20,
レイアウト:"左"、
幅:100,
高さ:100,
不透明度:0.5,
setPosition :function(left, top){
return;
},

if(settings.src && settings.closeSrc){
変数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"); 
休憩。 
case "right":
$(this).css("right","-100px"); 
休憩。 
case "center":
var left = (parseInt(window.screen.availWidth) - parseInt(settings.width))/2 "px"; 
$(this).css("left",left); 
休憩。 
デフォルト:
$(this).css("left","-100px"); 
休憩。 
}
} 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 のもの*/
}
パーセント= math.floor（パーセント）; css("top", parseInt(top) パーセント " px");
lastScrollY = パーセント;
czd.css("bottom", parseInt(top) - パーセント "px");ページの書き込み:


1. 独自に定義した JQuery をインポートし、ヘッドを構成します




コードをコピーします


コードは次のとおりです:

<デコレータ:ヘッド /> 
 
<スクリプト言語="javascript"> 
$(document).ready(function(){
$("#leftbelow").ad({
src:"<%=basePath%>/images/qrcode.png",
closeSrc:"<%=basePath%>/images/closeAd.gif",
autoHide:false,
非表示2 番目:5、
トップ:480、
レイアウト:"左",
幅:100,
高さ:100,
opacity:5
});

$("#left").ad({
src: "<%=basePath%>/images/longtentianxia20131010.jpg",
closeSrc:"<%=basePath%>/images/closeAd.gif",
href:".... .",
autoHide:false,
HideSecond:5,
トップ:-70,
レイアウト:「左」,
幅:100,
高さ:500 、
不透明度:5
}); 
$("#right").ad({
src:"<%=basePath%>/images/yingxiaodasai201203012.jpg",
closeSrc:"<%=basePath%> /images/closeAd.gif",
href:"......",
autoHide:false,
HideSecond:5,
top:-70,
レイアウト:"右",
幅:100,
高さ:500,
不透明度:5
}); 
}); 

二、書上本体代码

复制代 代码如下:

 

 

<%@include file="/page/public/sideBar.jsp"%> 

 

 

 
<%@include file="/page/public/top.jsp"%> 

 

 

 

 

 

 

 

 
<%@include file="/page/public/bottom.jsp"%>