一：全屏漂浮

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="#" οnclick="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="width: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="width: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>

 

//左右对联图片