Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Sina's lightbox effect. _Form effects

Sina's lightbox effect. _Form effects

WBOY
Release： 2016-05-16 19:21:45
Original
976 people have browsed it

When using it, just add rel="lightbox" to the A tag. e.g:
Sina's lightbox effect. _Form effects

I also wrote one myself, but it involves two modules, (func.js common library, and imagesLoader.js image loading class). Posted together after a while.
HTML #overlay {
FILTER: Alpha(opacity=50); BACKGROUND-IMAGE: url(images/blank.gif); BACKGROUND-COLOR: #000
}
Sina's lightbox effect. _Form effects

<script> <BR><!--// <BR>function addEvent(object, type, handler) <BR>{ <BR> if (object.addEventListener) { <BR> object.addEventListener(type, handler, false); <BR> } else if (object.attachEvent) { <BR> object.attachEvent(['on',type].join(''),handler); <BR> } else { <BR> object[['on',type].join('')] = handler; <BR> } <BR>} <BR>function WindowSize() <BR>{ // window size object <BR> this.w = 0; <BR> this.h = 0; <BR> return this.update(); <BR>} <BR>WindowSize.prototype.update = function() <BR>{ <BR> var d = document; <BR> this.w = <BR> (window.innerWidth) ? window.innerWidth <BR> : (d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth <BR> : d.body.clientWidth; <BR> this.h = <BR> (window.innerHeight) ? window.innerHeight <BR> : (d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight <BR> : d.body.clientHeight; <BR> return this; <BR>}; <BR>function PageSize() <BR>{ // page size object <BR> this.win = new WindowSize(); <BR> this.w = 0; <BR> this.h = 0; <BR> return this.update(); <BR>} <BR>PageSize.prototype.update = function() <BR>{ <BR> var d = document; <BR> this.w = <BR> (window.innerWidth && window.scrollMaxX) ? window.innerWidth + window.scrollMaxX <BR> : (d.body.scrollWidth > d.body.offsetWidth) ? d.body.scrollWidth <BR> : d.body.offsetWidt; <BR> this.h = <BR> (window.innerHeight && window.scrollMaxY) ? window.innerHeight + window.scrollMaxY <BR> : (d.body.scrollHeight > d.body.offsetHeight) ? d.body.scrollHeight <BR> : d.body.offsetHeight; <BR> this.win.update(); <BR> if (this.w < this.win.w) this.w = this.win.w; <BR> if (this.h < this.win.h) this.h = this.win.h; <BR> return this; <BR>}; <BR>function PagePos() <BR>{ // page position object <BR> this.x = 0; <BR> this.y = 0; <BR> return this.update(); <BR>} <BR>PagePos.prototype.update = function() <BR>{ <BR> var d = document; <BR> this.x = <BR> (window.pageXOffset) ? window.pageXOffset <BR> : (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft <BR> : (d.body) ? d.body.scrollLeft <BR> : 0; <BR> this.y = <BR> (window.pageYOffset) ? window.pageYOffset <BR> : (d.documentElement && d.documentElement.scrollTop) ? d.documentElement.scrollTop <BR> : (d.body) ? d.body.scrollTop <BR> : 0; <BR> return this; <BR>}; <BR>function UserAgent() <BR>{ // user agent information <BR> var ua = navigator.userAgent; <BR> this.isWinIE = this.isMacIE = false; <BR> this.isGecko = ua.match(/Gecko\//); <BR> this.isSafari = ua.match(/AppleWebKit/); <BR> this.isOpera = window.opera; <BR> if (document.all && !this.isGecko && !this.isSafari && !this.isOpera) { <BR> this.isWinIE = ua.match(/Win/); <BR> this.isMacIE = ua.match(/Mac/); <BR> this.isNewIE = (ua.match(/MSIE 5\.5/) || ua.match(/MSIE 6\.0/)); <BR> } <BR> return this; <BR>} <BR>// === lightbox === <BR>function LightBox(option) <BR>{ <BR> var self = this; <BR> self._imgs = new Array(); <BR> self._wrap = null; <BR> self._box = null; <BR> self._open = -1; <BR> self._page = new PageSize(); <BR> self._pos = new PagePos(); <BR> self._ua = new UserAgent(); <BR> self._expandable = false; <BR> self._expanded = false; <BR> self._expand = option.expandimg; <BR> self._shrink = option.shrinkimg; <BR> return self._init(option); <BR>} <BR>LightBox.prototype = { <BR> _init : function(option) <BR> { <BR> var self = this; <BR> var d = document; <BR> if (!d.getElementsByTagName) return; <BR> var links = d.getElementsByTagName("a"); <BR> for (var i=0;i<links.length;i++) { <BR> var anchor = links[i]; <BR> var num = self._imgs.length; <BR> if (!anchor.getAttribute("href") <BR> || anchor.getAttribute("rel") != "lightbox") continue; <BR> // initialize item <BR> self._imgs[num] = {src:anchor.getAttribute("href"),w:-1,h:-1,title:'',cls:anchor.className}; <BR> if (anchor.getAttribute("title")) <BR> self._imgs[num].title = anchor.getAttribute("title"); <BR> else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute("title")) <BR> self._imgs[num].title = anchor.firstChild.getAttribute("title"); <BR> anchor.onclick = self._genOpener(num); // set closure to onclick event <BR> } <BR> var body = d.getElementsByTagName("body")[0]; <BR> self._wrap = self._createWrapOn(body,option.loadingimg); <BR> self._box = self._createBoxOn(body,option); <BR> return self; <BR> }, <BR> _genOpener : function(num) <BR> { <BR> var self = this; <BR> return function() { self._show(num); return false; } <BR> }, <BR> _createWrapOn : function(obj,imagePath) <BR> { <BR> var self = this; <BR> if (!obj) return null; <BR> // create wrapper object, translucent background <BR> var wrap = document.createElement('div'); <BR> wrap.id = 'overlay'; <BR> with (wrap.style) { <BR> display = 'none'; <BR> position = 'fixed'; <BR> top = '0px'; <BR> left = '0px'; <BR> zIndex = '50'; <BR> width = '100%'; <BR> height = '100%'; <BR> } <BR> if (self._ua.isWinIE) wrap.style.position = 'absolute'; <BR> addEvent(wrap,"click",function() { self._close(); }); <BR> obj.appendChild(wrap); <BR> // create loading image, animated image <BR> var imag = new Image; <BR> imag.onload = function() { <BR> var spin = document.createElement('img'); <BR> spin.id = 'loadingImage'; <BR> spin.src = imag.src; <BR> spin.style.position = 'relative'; <BR> self._set_cursor(spin); <BR> addEvent(spin,'click',function() { self._close(); }); <BR> wrap.appendChild(spin); <BR> imag.onload = function(){}; <BR> }; <BR> if (imagePath != '') imag.src = imagePath; <BR> return wrap; <BR> }, <BR> _createBoxOn : function(obj,option) <BR> { <BR> var self = this; <BR> if (!obj) return null; <BR> // create lightbox object, frame rectangle <BR> var box = document.createElement('div'); <BR> box.id = 'lightbox'; <BR> with (box.style) { <BR> display = 'none'; <BR> position = 'absolute'; <BR> zIndex = '60'; <BR> } <BR> obj.appendChild(box); <BR> // create image object to display a target image <BR> var img = document.createElement('img'); <BR> img.id = 'lightboxImage'; <BR> self._set_cursor(img); <BR> addEvent(img,'click',function(){ self._close(); }); <BR> addEvent(img,'mouseover',function(){ self._show_action(); }); <BR> addEvent(img,'mouseout',function(){ self._hide_action(); }); <BR> box.appendChild(img); <BR> var zoom = document.createElement('img'); <BR> zoom.id = 'actionImage'; <BR> with (zoom.style) { <BR> display = 'none'; <BR> position = 'absolute'; <BR> top = '15px'; <BR> left = '15px'; <BR> zIndex = '70'; <BR> } <BR> self._set_cursor(zoom); <BR> zoom.src = self._expand; <BR> addEvent(zoom,'mouseover',function(){ self._show_action(); }); <BR> addEvent(zoom,'click', function() { self._zoom(); }); <BR> box.appendChild(zoom); <BR> addEvent(window,'resize',function(){ self._set_size(true); }); <BR> // close button <BR> if (option.closeimg) { <BR> var btn = document.createElement('img'); <BR> btn.id = 'closeButton'; <BR> with (btn.style) { <BR> display = 'inline'; <BR> position = 'absolute'; <BR> right = '10px'; <BR> top = '10px'; <BR> width = '15px'; <BR> height = '15px'; <BR> zIndex = '80'; <BR> } <BR> btn.src = option.closeimg; <BR> self._set_cursor(btn); <BR> addEvent(btn,'click',function(){ self._close(); }); <BR> box.appendChild(btn); <BR> } <BR> // caption text <BR> var caption = document.createElement('span'); <BR> caption.id = 'lightboxCaption'; <BR> with (caption.style) { <BR> display = 'none'; <BR> position = 'absolute'; <BR> zIndex = '80'; <BR> } <BR> box.appendChild(caption); <BR> // create effect image <BR> if (!option.effectpos) option.effectpos = {x:0,y:0}; <BR> else { <BR> if (option.effectpos.x == '') option.effectpos.x = 0; <BR> if (option.effectpos.y == '') option.effectpos.y = 0; <BR> } <BR> var effect = new Image; <BR> effect.onload = function() { <BR> var effectImg = document.createElement('img'); <BR> effectImg.id = 'effectImage'; <BR> effectImg.src = effect.src; <BR> if (option.effectclass) effectImg.className = option.effectclass; <BR> with (effectImg.style) { <BR> position = 'absolute'; <BR> display = 'none'; <BR> left = [option.effectpos.x,'px'].join('');; <BR> top = [option.effectpos.y,'px'].join(''); <BR> zIndex = '90'; <BR> } <BR> self._set_cursor(effectImg); <BR> addEvent(effectImg,'click',function() { effectImg.style.display = 'none'; }); <BR> box.appendChild(effectImg); <BR> }; <BR> if (option.effectimg != '') effect.src = option.effectimg; <BR> return box; <BR> }, <BR> _set_photo_size : function() <BR> { <BR> var self = this; <BR> if (self._open == -1) return; <BR> var imag = self._box.firstChild; <BR> var targ = { w:self._page.win.w - 30, h:self._page.win.h - 30 }; <BR> var orig = { w:self._imgs[self._open].w, h:self._imgs[self._open].h }; <BR> // shrink image with the same aspect <BR> var ratio = 1.0; <BR> if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) <br><br> ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h; <BR> imag.width = Math.floor(orig.w * ratio); <BR> imag.height = Math.floor(orig.h * ratio); <BR> self._expandable = (ratio < 1.0) ? true : false; <BR> if (self._ua.isWinIE) self._box.style.display = "block"; <BR> self._box.style.top = [self._pos.y + (self._page.win.h - imag.height - 30) / 2,'px'].join(''); <BR> self._box.style.left = [((self._page.win.w - imag.width - 30) / 2),'px'].join(''); <BR> self._show_caption(true); <BR> }, <BR> _set_size : function(onResize) <BR> { <BR> var self = this; <BR> if (self._open == -1) return; <BR> self._page.update(); <BR> self._pos.update(); <BR> var spin = self._wrap.firstChild; <BR> if (spin) { <BR> var top = (self._page.win.h - spin.height) / 2; <BR> if (self._wrap.style.position == 'absolute') top += self._pos.y; <BR> spin.style.top = [top,'px'].join(''); <BR> spin.style.left = [(self._page.win.w - spin.width - 30) / 2,'px'].join(''); <BR> } <BR> if (self._ua.isWinIE) { <BR> self._wrap.style.width = [self._page.win.w,'px'].join(''); <BR> self._wrap.style.height = [self._page.h,'px'].join(''); <BR> } <BR> if (onResize) self._set_photo_size(); <BR> }, <BR> _show_action : function() <BR> { <BR> var self = this; <BR> if (self._open == -1 || !self._expandable) return; <BR> var obj = document.getElementById('actionImage'); <BR> if (!obj) return; <BR> obj.src = (self._expanded) ? self._shrink : self._expand; <BR> obj.style.display = 'inline'; <BR> }, <BR> _hide_action : function() <BR> { <BR> var self = this; <BR> var obj = document.getElementById('actionImage'); <BR> if (obj) obj.style.display = 'none'; <BR> }, <BR> _zoom : function() <BR> { <BR> var self = this; <BR> if (self._expanded) { <BR> self._set_photo_size(); <BR> self._expanded = false; <BR> } else if (self._open > -1) { <BR> var imag = self._box.firstChild; <BR> self._box.style.top = [self._pos.y,'px'].join(''); <BR> self._box.style.left = '0px'; <BR> imag.width = self._imgs[self._open].w; <BR> imag.height = self._imgs[self._open].h; <BR> self._show_caption(false); <BR> self._expanded = true; <BR> } <BR> self._show_action(); <BR> }, <BR> _show_caption : function(enable) <BR> { <BR> var self = this; <BR> var caption = document.getElementById('lightboxCaption'); <BR> if (!caption) return; <BR> if (caption.innerHTML.length == 0 || !enable) { <BR> caption.style.display = 'none'; <BR> } else { // now display caption <BR> var imag = self._box.firstChild; <BR> with (caption.style) { <BR> top = [imag.height + 10,'px'].join(''); // 10 is top margin of lightbox <BR> left = '0px'; <BR> width = [imag.width + 20,'px'].join(''); // 20 is total side margin of lightbox <BR> height = '1.2em'; <BR> display = 'block'; <BR> } <BR> } <BR> }, <BR> _show : function(num) <BR> { <BR> var self = this; <BR> var imag = new Image; <BR> if (num < 0 || num >= self._imgs.length) return; <BR> var loading = document.getElementById('loadingImage'); <BR> var caption = document.getElementById('lightboxCaption'); <BR> var effect = document.getElementById('effectImage'); <BR> self._open = num; // set opened image number <BR> self._set_size(false); // calc and set wrapper size <BR> self._wrap.style.display = "block"; <BR> if (loading) loading.style.display = 'inline'; <BR> imag.onload = function() { <BR> if (self._imgs[self._open].w == -1) { <BR> // store original image width and height <BR> self._imgs[self._open].w = imag.width; <BR> self._imgs[self._open].h = imag.height; <BR> } <BR> if (effect) { <BR> effect.style.display = (!effect.className || self._imgs[self._open].cls == effect.className) <BR> ? 'block' : 'none'; <BR> } <BR> if (caption) caption.innerHTML = self._imgs[self._open].title; <BR> self._set_photo_size(); // calc and set lightbox size <BR> self._hide_action(); <BR> self._box.style.display = "block"; <BR> self._box.firstChild.src = imag.src; <BR> self._box.firstChild.setAttribute('title',self._imgs[self._open].title); <BR> if (loading) loading.style.display = 'none'; <BR> }; <BR> self._expandable = false; <BR> self._expanded = false; <BR> imag.src = self._imgs[self._open].src; <BR> }, <BR> _set_cursor : function(obj) <BR> { <BR> var self = this; <BR> if (self._ua.isWinIE && !self._ua.isNewIE) return; <BR> obj.style.cursor = 'pointer'; <BR> }, <BR> _close : function() <BR> { <BR> var self = this; <BR> self._open = -1; <BR> self._hide_action(); <BR> self._wrap.style.display = "none"; <BR> self._box.style.display = "none"; <BR> } <BR>}; <BR>// === main === <BR>addEvent(window,"load",function() { <BR> var lightbox = new LightBox({ <BR> loadingimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/loading.gif', <BR> expandimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/expand.gif', <BR> shrinkimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/shrink.gif', <BR> effectimg:'images/zzoop.gif', <BR> effectpos:{x:-40,y:-20}, <BR> effectclass:'images/effectable', <BR> closeimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/close.gif' <BR> }); <BR>}); <BR>//--> <BR></script> click here for backClick to return

Related labels：
sina的lightbox效果。
source：php.cn
Previous article：Post a Javascript code commonly used in Mozilla_Basic knowledge Next article：Add a splitter of a previously written table for everyone_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
CSS styles not applied to site I'm making a website using Bootstrap5 but the index.css properties are not being applied t...
From 2024-04-06 17:12:23
0
1
336
Why does omitting 0ms sleep break my css transitions? I'm trying to implement a FLIP animation to see if I understand it correctly. In this code...
From 2024-04-06 16:29:50
0
2
490
Invalid React child element (found: Object with key {clientVersion}). If you want to render a collection of child elements, use an array instead I have a multi-step form and when I try to submit it shows this error. However, if I use c...
From 2024-04-06 16:25:39
0
1
346
Modify matSelect style when displaying options How to change properties of mat-select when option is on? <mat-selectclass="select...
From 2024-04-05 09:23:19
0
1
1374
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template