网站多飘窗与对联的实现

一：全屏漂浮

1.Pf.js (这个方法很重要)

function addEvent(obj, evtType, func, cap) {

cap = cap || false;

if (obj.addEventListener) {

obj.addEventListener(evtType, func, cap);

return true;

} else if (obj.attachEvent) {

if (cap) {

obj.setCapture();

return true;

} else {

return obj.attachEvent("on" + evtType, func);

}

} else {

return false;

}

function getPageScroll() {

var xScroll, yScroll;

if (self.pageXOffset) {

xScroll = self.pageXOffset;

} else if (document.documentElement && document.documentElement.scrollLeft) {

xScroll = document.documentElement.scrollLeft;

} else if (document.body) {

xScroll = document.body.scrollLeft;

}

if (self.pageYOffset) {

yScroll = self.pageYOffset;

} else if (document.documentElement && document.documentElement.scrollTop) {

yScroll = document.documentElement.scrollTop;

} else if (document.body) {

yScroll = document.body.scrollTop;

}

arrayPageScroll = new Array(xScroll, yScroll);

return arrayPageScroll;

}

function GetPageSize() {

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight) {

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else {

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight) {

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) {

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) {

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

if (yScroll < windowHeight) {

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

if (xScroll < windowWidth) {

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)

return arrayPageSize;

}

var AdMoveConfig = new Object();

AdMoveConfig.IsInitialized = false;

AdMoveConfig.ScrollX = 0;

AdMoveConfig.ScrollY = 0;

AdMoveConfig.MoveWidth = 0;

AdMoveConfig.MoveHeight = 0;

AdMoveConfig.Resize = function () {

var winsize = GetPageSize();

AdMoveConfig.MoveWidth = winsize[2];

AdMoveConfig.MoveHeight = winsize[3];

AdMoveConfig.Scroll();

}

AdMoveConfig.Scroll = function () {

var winscroll = getPageScroll();

AdMoveConfig.ScrollX = winscroll[0];

AdMoveConfig.ScrollY = winscroll[1];

}

addEvent(window, "resize", AdMoveConfig.Resize);

addEvent(window, "scroll", AdMoveConfig.Scroll);

function AdMove(id) {

if (!AdMoveConfig.IsInitialized) {

AdMoveConfig.Resize();

AdMoveConfig.IsInitialized = true;

}

var obj = document.getElementById(id);

obj.style.position = "absolute";

obj.style.display = "";

var W = AdMoveConfig.MoveWidth - obj.offsetWidth;

var H = AdMoveConfig.MoveHeight - obj.offsetHeight;

var x = W * Math.random(), y = H * Math.random();

var rad = (Math.random() + 1) * Math.PI / 6;

var kx = Math.sin(rad), ky = Math.cos(rad);

var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);

var step = 1;

var interval;

this.SetLocation = function (vx, vy) { x = vx; y = vy; }

this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }

obj.CustomMethod = function () {

obj.style.left = (x + AdMoveConfig.ScrollX) + "px";

obj.style.top = (y + AdMoveConfig.ScrollY) + "px";

rad = (Math.random() + 1) * Math.PI / 6;

W = AdMoveConfig.MoveWidth - obj.offsetWidth;

H = AdMoveConfig.MoveHeight - obj.offsetHeight;

x = x + step * kx * dirx;

if (x < 0) { dirx = 1; x = 0; kx = Math.sin(rad); ky = Math.cos(rad); }

if (x > W) { dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); }

y = y + step * ky * diry;

if (y < 0) { diry = 1; y = 0; kx = Math.sin(rad); ky = Math.cos(rad); }

if (y > H) { diry = -1; y = H; kx = Math.sin(rad); ky = Math.cos(rad); }

}

this.Run = function () {

var delay = 10;

interval = setInterval(obj.CustomMethod, delay);

obj.onmouseover = function () { clearInterval(interval); }

obj.onmouseout = function () { interval = setInterval(obj.CustomMethod, delay); }

}

2.想加几个加几个加载并执行漂浮的方法
var ad1 = new AdMove("ad1");
ad1.Run();
var delparent = function (o) {
o.parentNode.parentNode.removeChild(o.parentNode)
}
var delparent = function (o) {
o.parentNode.parentNode.removeChild(o.parentNode)
}

3.页面元素

//关闭图片

//漂浮图片

二：对联悬挂

1.JsPage.js

/**
* jQuery jPages v0.7
* Client side pagination with jQuery
* http://luis-almeida.github.com/jPages
*
* Licensed under the MIT license.
* Copyright 2012 Luís Almeida
* https://github.com/luis-almeida
*/

;(function($, window, document, undefined) {

var name = "jPages",
instance = null,
defaults = {
containerID: "",
first: false,
previous: "← previous",
next: "next →",
last: false,
links: "numeric", // blank || title
startPage: 1,
perPage: 10,
midRange: 5,
startRange: 1,
endRange: 1,
keyBrowse: false,
scrollBrowse: false,
pause: 0,
clickStop: false,
delay: 50,
direction: "forward", // backwards || auto || random ||
animation: "", // http://daneden.me/animate/ - any entrance animations
fallback: 400,
minHeight: true,
callback: undefined // function( pages, items ) { }
};

function Plugin(element, options) {
this.options = $.extend({}, defaults, options);

this._container = $("#" + this.options.containerID);
if (!this._container.length) return;

this.jQwindow = $(window);
this.jQdocument = $(document);

this._holder = $(element);
this._nav = {};

this._first = $(this.options.first);
this._previous = $(this.options.previous);
this._next = $(this.options.next);
this._last = $(this.options.last);

/* only visible items! */
this._items = this._container.children(":visible");
this._itemsShowing = $([]);
this._itemsHiding = $([]);

this._numPages = Math.ceil(this._items.length / this.options.perPage);
this._currentPageNum = this.options.startPage;

this._clicked = false;
this._cssAnimSupport = this.getCSSAnimationSupport();

this.init();
}

Plugin.prototype = {

constructor : Plugin,

getCSSAnimationSupport : function() {
var animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '',
elm = this._container.get(0);

if (elm.style.animationName) animation = true;

if (animation === false) {
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
pfx = domPrefixes[i];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}

return animation;
},

init : function() {
this.setStyles();
this.setNav();
this.paginate(this._currentPageNum);
this.setMinHeight();
},

setStyles : function() {
var requiredStyles = "<style>" +
".jp-invisible { visibility: hidden !important; } " +
".jp-hidden { display: none !important; }" +
"</style>";

$(requiredStyles).appendTo("head");

if (this._cssAnimSupport && this.options.animation.length)
this._items.addClass("animated jp-hidden");
else this._items.hide();

setNav : function() {
var navhtml = this.writeNav();

this._holder.each(this.bind(function(index, element) {
var holder = $(element);
holder.html(navhtml);
this.cacheNavElements(holder, index);
this.bindNavHandlers(index);
this.disableNavSelection(element);
}, this));

if (this.options.keyBrowse) this.bindNavKeyBrowse();
if (this.options.scrollBrowse) this.bindNavScrollBrowse();
},

writeNav : function() {
var i = 1, navhtml;
navhtml = this.writeBtn("first") + this.writeBtn("previous");

for (; i <= this._numPages; i++) {
if (i === 1 && this.options.startRange === 0) navhtml += "<span>...</span>";
if (i > this.options.startRange && i <= this._numPages - this.options.endRange)
navhtml += "<a href='#' class='jp-hidden'>";
else
navhtml += "<a>";

switch (this.options.links) {
case "numeric":
navhtml += i;
break;
case "blank":
break;
case "title":
var title = this._items.eq(i - 1).attr("data-title");
navhtml += title !== undefined ? title : "";
break;
}

navhtml += "</a>";
if (i === this.options.startRange || i === this._numPages - this.options.endRange)
navhtml += "<span>...</span>";
}
navhtml += this.writeBtn("next") + this.writeBtn("last") + "</div>";
return navhtml;
},

writeBtn : function(which) {

return this.options[which] !== false && !$(this["_" + which]).length ?
"<a class='jp-" + which + "'>" + this.options[which] + "</a>" : "";

cacheNavElements : function(holder, index) {
this._nav[index] = {};
this._nav[index].holder = holder;
this._nav[index].first = this._first.length ? this._first : this._nav[index].holder.find("a.jp-first");
this._nav[index].previous = this._previous.length ? this._previous : this._nav[index].holder.find("a.jp-previous");
this._nav[index].next = this._next.length ? this._next : this._nav[index].holder.find("a.jp-next");
this._nav[index].last = this._last.length ? this._last : this._nav[index].holder.find("a.jp-last");
this._nav[index].fstBreak = this._nav[index].holder.find("span:first");
this._nav[index].lstBreak = this._nav[index].holder.find("span:last");
this._nav[index].pages = this._nav[index].holder.find("a").not(".jp-first, .jp-previous, .jp-next, .jp-last");
this._nav[index].permPages =
this._nav[index].pages.slice(0, this.options.startRange)
.add(this._nav[index].pages.slice(this._numPages - this.options.endRange, this._numPages));
this._nav[index].pagesShowing = $([]);
this._nav[index].currentPage = $([]);
},

bindNavHandlers : function(index) {
var nav = this._nav[index];

// default nav
nav.holder.bind("click.jPages", this.bind(function(evt) {
var newPage = this.getNewPage(nav, $(evt.target));
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
evt.preventDefault();
}, this));

// custom first
if (this._first.length) {
this._first.bind("click.jPages", this.bind(function() {
if (this.validNewPage(1)) {
this._clicked = true;
this.paginate(1);
}
}, this));
}

// custom previous
if (this._previous.length) {
this._previous.bind("click.jPages", this.bind(function() {
var newPage = this._currentPageNum - 1;
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
}, this));
}

// custom next
if (this._next.length) {
this._next.bind("click.jPages", this.bind(function() {
var newPage = this._currentPageNum + 1;
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
}, this));
}

// custom last
if (this._last.length) {
this._last.bind("click.jPages", this.bind(function() {
if (this.validNewPage(this._numPages)) {
this._clicked = true;
this.paginate(this._numPages);
}
}, this));
}

disableNavSelection : function(element) {
if (typeof element.onselectstart != "undefined")
element.onselectstart = function() {
return false;
};
else if (typeof element.style.MozUserSelect != "undefined")
element.style.MozUserSelect = "none";
else
element.onmousedown = function() {
return false;
};
},

bindNavKeyBrowse : function() {
this.jQdocument.bind("keydown.jPages", this.bind(function(evt) {
var target = evt.target.nodeName.toLowerCase();
if (this.elemScrolledIntoView() && target !== "input" && target != "textarea") {
var newPage = this._currentPageNum;

if (evt.which == 37) newPage = this._currentPageNum - 1;
if (evt.which == 39) newPage = this._currentPageNum + 1;

if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
}
}, this));
},

elemScrolledIntoView : function() {
var docViewTop, docViewBottom, elemTop, elemBottom;
docViewTop = this.jQwindow.scrollTop();
docViewBottom = docViewTop + this.jQwindow.height();
elemTop = this._container.offset().top;
elemBottom = elemTop + this._container.height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));

// comment above and uncomment below if you want keyBrowse to happen
// only when container is completely visible in the page
/*return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) &&
(elemBottom <= docViewBottom) && (elemTop >= docViewTop) );*/
},

bindNavScrollBrowse : function() {
this._container.bind("mousewheel.jPages DOMMouseScroll.jPages", this.bind(function(evt) {
var newPage = (evt.originalEvent.wheelDelta || -evt.originalEvent.detail) > 0 ?
(this._currentPageNum - 1) : (this._currentPageNum + 1);
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
evt.preventDefault();
return false;
}, this));
},

getNewPage : function(nav, target) {
if (target.is(nav.currentPage)) return this._currentPageNum;
if (target.is(nav.pages)) return nav.pages.index(target) + 1;
if (target.is(nav.first)) return 1;
if (target.is(nav.last)) return this._numPages;
if (target.is(nav.previous)) return nav.pages.index(nav.currentPage);
if (target.is(nav.next)) return nav.pages.index(nav.currentPage) + 2;
},

validNewPage : function(newPage) {
return newPage !== this._currentPageNum && newPage > 0 && newPage <= this._numPages;
},

paginate : function(page) {
var itemRange, pageInterval;
itemRange = this.updateItems(page);
pageInterval = this.updatePages(page);
this._currentPageNum = page;
if ($.isFunction(this.options.callback))
this.callback(page, itemRange, pageInterval);

this.updatePause();
},

updateItems : function(page) {
var range = this.getItemRange(page);
this._itemsHiding = this._itemsShowing;
this._itemsShowing = this._items.slice(range.start, range.end);
if (this._cssAnimSupport && this.options.animation.length) this.cssAnimations(page);
else this.jQAnimations(page);
return range;
},

getItemRange : function(page) {
var range = {};
range.start = (page - 1) * this.options.perPage;
range.end = range.start + this.options.perPage;
if (range.end > this._items.length) range.end = this._items.length;
return range;
},

cssAnimations : function(page) {
clearInterval(this._delay);

this._itemsHiding
.removeClass(this.options.animation + " jp-invisible")
.addClass("jp-hidden");

this._itemsShowing
.removeClass("jp-hidden")
.addClass("jp-invisible");

this._itemsOriented = this.getDirectedItems(page);
this._index = 0;

this._delay = setInterval(this.bind(function() {
if (this._index === this._itemsOriented.length) clearInterval(this._delay);
else {
this._itemsOriented
.eq(this._index)
.removeClass("jp-invisible")
.addClass(this.options.animation);
}
this._index = this._index + 1;
}, this), this.options.delay);
},

jQAnimations : function(page) {
clearInterval(this._delay);
this._itemsHiding.addClass("jp-hidden");
this._itemsShowing.fadeTo(0, 0).removeClass("jp-hidden");
this._itemsOriented = this.getDirectedItems(page);
this._index = 0;
this._delay = setInterval(this.bind(function() {
if (this._index === this._itemsOriented.length) clearInterval(this._delay);
else {
this._itemsOriented
.eq(this._index)
.fadeTo(this.options.fallback, 1);
}
this._index = this._index + 1;
}, this), this.options.delay);
},

getDirectedItems : function(page) {
var itemsToShow;

switch (this.options.direction) {
case "backwards":
itemsToShow = $(this._itemsShowing.get().reverse());
break;
case "random":
itemsToShow = $(this._itemsShowing.get().sort(function() {
return (Math.round(Math.random()) - 0.5);
}));
break;
case "auto":
itemsToShow = page >= this._currentPageNum ?
this._itemsShowing : $(this._itemsShowing.get().reverse());
break;
default:
itemsToShow = this._itemsShowing;
}

return itemsToShow;
},

updatePages : function(page) {
var interval, index, nav;
interval = this.getInterval(page);
for (index in this._nav) {
if (this._nav.hasOwnProperty(index)) {
nav = this._nav[index];
this.updateBtns(nav, page);
this.updateCurrentPage(nav, page);
this.updatePagesShowing(nav, interval);
this.updateBreaks(nav, interval);
}
}
return interval;
},

getInterval : function(page) {
var neHalf, upperLimit, start, end;
neHalf = Math.ceil(this.options.midRange / 2);
upperLimit = this._numPages - this.options.midRange;
start = page > neHalf ? Math.max(Math.min(page - neHalf, upperLimit), 0) : 0;
end = page > neHalf ?
Math.min(page + neHalf - (this.options.midRange % 2 > 0 ? 1 : 0), this._numPages) :
Math.min(this.options.midRange, this._numPages);
return {start: start,end: end};
},

updateBtns : function(nav, page) {
if (page === 1) {
nav.first.addClass("jp-disabled");
nav.previous.addClass("jp-disabled");
}
if (page === this._numPages) {
nav.next.addClass("jp-disabled");
nav.last.addClass("jp-disabled");
}
if (this._currentPageNum === 1 && page > 1) {
nav.first.removeClass("jp-disabled");
nav.previous.removeClass("jp-disabled");
}
if (this._currentPageNum === this._numPages && page < this._numPages) {
nav.next.removeClass("jp-disabled");
nav.last.removeClass("jp-disabled");
}
},

updateCurrentPage : function(nav, page) {
nav.currentPage.removeClass("jp-current");
nav.currentPage = nav.pages.eq(page - 1).addClass("jp-current");
},

updatePagesShowing : function(nav, interval) {
var newRange = nav.pages.slice(interval.start, interval.end).not(nav.permPages);
nav.pagesShowing.not(newRange).addClass("jp-hidden");
newRange.not(nav.pagesShowing).removeClass("jp-hidden");
nav.pagesShowing = newRange;
},

updateBreaks : function(nav, interval) {
if (
interval.start > this.options.startRange ||
(this.options.startRange === 0 && interval.start > 0)
) nav.fstBreak.removeClass("jp-hidden");
else nav.fstBreak.addClass("jp-hidden");

if (interval.end < this._numPages - this.options.endRange) nav.lstBreak.removeClass("jp-hidden");
else nav.lstBreak.addClass("jp-hidden");
},

callback : function(page, itemRange, pageInterval) {
var pages = {
current: page,
interval: pageInterval,
count: this._numPages
},
items = {
showing: this._itemsShowing,
oncoming: this._items.slice(itemRange.start + this.options.perPage, itemRange.end + this.options.perPage),
range: itemRange,
count: this._items.length
};

pages.interval.start = pages.interval.start + 1;
items.range.start = items.range.start + 1;
this.options.callback(pages, items);
},

updatePause : function() {
if (this.options.pause && this._numPages > 1) {
clearTimeout(this._pause);
if (this.options.clickStop && this._clicked) return;
else {
this._pause = setTimeout(this.bind(function() {
this.paginate(this._currentPageNum !== this._numPages ? this._currentPageNum + 1 : 1);
}, this), this.options.pause);
}
}
},

setMinHeight : function() {
if (this.options.minHeight && !this._container.is("table, tbody")) {
setTimeout(this.bind(function() {
this._container.css({ "min-height": this._container.css("height") });
}, this), 1000);
}
},

bind : function(fn, me) {
return function() {
return fn.apply(me, arguments);
};
},

destroy : function() {
this.jQdocument.unbind("keydown.jPages");
this._container.unbind("mousewheel.jPages DOMMouseScroll.jPages");

if (this.options.minHeight) this._container.css("min-height", "");
if (this._cssAnimSupport && this.options.animation.length)
this._items.removeClass("animated jp-hidden jp-invisible " + this.options.animation);
else this._items.removeClass("jp-hidden").fadeTo(0, 1);
this._holder.unbind("click.jPages").empty();
}

};

$.fn[name] = function(arg) {
var type = $.type(arg);

if (type === "object") {
if (this.length && !$.data(this, name)) {
instance = new Plugin(this, arg);
this.each(function() {
$.data(this, name, instance);
});
}
return this;
}

if (type === "string" && arg === "destroy") {
instance.destroy();
this.each(function() {
$.removeData(this, name);
});
return this;
}

if (type === 'number' && arg % 1 === 0) {
if (instance.validNewPage(arg)) instance.paginate(arg);
return this;
}

return this;
};

})(jQuery, window, document);

2.页面元素

<div id="ShowLAD" style="position:absolute;z-index:100;top:400px;left:1%" ;display:none;>
<div style="135px;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closeadL();">
<font color="ff0000">关闭</font>
<br>
<img width="110" height="368" src="~/images/coupletLeft.jpg" />
</div>
</div>
<div id="ShowRAD" style="position:absolute;z-index:100;top:400px;left:91%" ;display:none;>
<div style="135px;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closeadR();">
<font color="ff0000">关闭</font>
<br>
<img width="110" height="368" src="~/images/coupletRight.jpg" />
</div>
</div>
<script type="text/javascript">
var bodyfrm = (document.compatMode.toLowerCase() == "css1compat") ? document.documentElement : document.body;
var adstl = document.getElementById("ShowLAD").style;
var adstr = document.getElementById("ShowRAD").style;
adstl = (bodyfrm.clientHeight - 530 - 22) + "px";
adstr = (bodyfrm.clientHeight - 530 - 22) + "px";
function moveR() {
adstl.top = (getScrollTop() + bodyfrm.clientHeight - 530 - 22) + "px";
adstr.top = (getScrollTop() + bodyfrm.clientHeight - 530 - 22) + "px";
}
function getScrollTop() {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop;
}

3.加载并执行
setInterval("moveR();", 80);
var adstl = document.getElementById("ShowLAD").style;
var adstr = document.getElementById("ShowRAD").style;
function closeadL() {
adstl.display = 'none';
}
function closeadR() {
adstr.display = 'none';
}
$(function () {
$("div.holder").jPages({
containerID: "movies",
previous: "←",
next: "→",
perPage: 5,
midRange: 3,
delay: 20
});
});
</script>

//左右对联图片