一：全屏漂浮
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.页面元素
<div id="ad1" style="z-index: 5000;">
<a href="javascript:void(0)" ; target="_blank" ; style="color:red;" title="">
<img src="/images/NewYearPf.jpg" /></br>
</a>
<a href="#" onclick="delparent(this)">
<img src="/Images/close.gif" />
</a>
</div>
//关闭图片
//漂浮图片
二：对联悬挂
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>
//左右对联图片
