js实现悬浮放大画册图片墙效果代码-html代码-BFW代码库

js实现悬浮放大画册图片墙效果代码

代码语言：html

代码描述：js实现悬浮放大画册图片墙效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>


    <style type="text/css">
        body {
        
        		background: #222;
        
        		overflow: hidden;
        
        		left: 0;
        
        		top: 0;
        
        		width: 100%;
        
        		height: 100%;
        
        		margin: 0;
        
        		padding: 0;
        
        	}
        
        	#screen span {
        
        		position:absolute;
        
        		overflow:hidden;
        
        		border:#FFF solid 1px;
        
        		background:#FFF;
        
        	}
        
        	#screen img{
        
        		position:absolute;
        
        		left:-32px;
        
        		top:-32px;
        
        		cursor: pointer;
        
        	}
        
        	#caption, #title{
        
        		color: #FFF;
        
        		font-family: georgia, 'times new roman', times, veronica, serif;
        
        		font-size: 1em;
        
        		text-align: center;
        
        	}
        
        	#caption b {
        
        		font-size: 2em;
        
        	}
    </style>



    <script type="text/javascript">
        <!--
        
        window.onerror = new Function("return true");
        
        var obj = [];
        
        var scr;
        
        var spa;
        
        var img;
        
        var W;
        
        var Wi;
        
        var Hi;
        
        var wi;
        
        var hi;
        
        var Sx;
        
        var Sy;
        
        var M;
        
        var xm;
        
        var ym;
        
        var xb = 0;
        
        var yb = 0;
        
        var ob =  - 1;
        
        var cl = false;
        
        
        
        /* needed in standard mode */
        
        px = function(x)
        
        {
        
        	return Math.round(x) + "px";
        
        }
        
        
        
        /* center image  - do not resize for perf. reason */
        
        img_center = function(o)
        
        {
        
        	with(img[o])
        
        	{
        
        		style.left = px( - (width - Wi) / 2);
        
        		style.top = px( - (height - Hi) / 2);
        
        	}
        
        }
        
        
        
        //////////////////////////////////////////////////////////
        
        var Nx = 4; //size grid x
        
        var Ny = 4; //size grid y
        
        var Tx = 3; // image width
        
        var Ty = 3; // image height
        
        var Mg = 40; // margin
        
        var SP = 1; // speed
        
        //////////////////////////////////////////////////////////
        
        
        
        function Cobj(o, x, y)
        
        {
        
        	this.o = o;
        
        	this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
        
        	this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
        
        	this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
        
        	this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
        
        	this.l = 0;
        
        	this.t = 0;
        
        	this.w = 0;
        
        	this.h = 0;
        
        	this.s = 0;
        
        	this.mv = false;
        
        	this.spa = spa[o].style;
        
        	this.img = img[o];
        
        	this.txt = img[o].alt;
        
        	img[o].alt = "";
        
        
        
        	/* zooming loop */
        
        	this.zoom = function()
        
        	{
        
        		with(this)
        
        		{
        
        			l += li * s;
        
        			t += ti * s;
        
        			w += wi * s;
        
        			h += hi * s;
        
        			if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
        
        			{
        
        				/* force window.event */
        
        				window.focus();
        
        				/* loop */
        
        				setTimeout("obj[" + o + "].zoom()", 16);
        
        			}
        
        			else
        
        			{
        
        				/* finished */
        
        				mv = false;
        
        				/* set final position */
        
        				if (s > 0)
        
        				{
        
        					l = ix * M + ix * Sx;
        
        					t = iy * M + iy * Sy;
        
        					w = Wi;
        
        					h = Hi;
        
        				}
        
        				else
        
        				{
        
        					l = x * M + x * Sx;
        
        					t = y * M + y * Sy;
        
        					w = Sx;
        
        					h = Sy;
        
        				}
        
        			}
        
        			/* html animation */
        
        			with(spa)
        
        			{
        
        				left = px(l);
        
        				top = px(t);
        
        				width = px(w);
        
        				height = px(h);
        
        				zIndex = Math.round(w);
        
        			}
        
        		}
        
        	}
        
        
        
        	this.click = function()
        
        	{
        
        		with(this)
        
        		{
        
        			img_center(o);
        
        			/* zooming logic */
        
        			if ( ! mv || cl)
        
        			{
        
        				if (s > 0)
        
        				{
        
        					if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)
        
        					{
        
        						s =  - 2;
        
        						mv = true;
        
        						zoom();
        
        						cap.innerHTML = txt;
        
        					}
        
        				}
        
        				else
        
        				{
        
        					if (cl || ob != o)
        
        					{
        
        						if (ob >= 0)
        
        						{
        
        							with(obj[ob])
        
        							{
        
        								s =  - 2;
        
        								mv = true;
        
        								zoom();
        
        							}
        
        						}
        
        						ob = o;
        
        						s = 1;
        
        						xb = xm;
        
        						yb = ym;
        
        						mv = true;
        
        						zoom();
        
        						cap.innerHTML = txt;
        
        					}
        
        				}
        
        			}
        
        		}
        
        	}
        
        	
        
        	/* hook up events */
        
        	img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");
        
        	img[o].onclick = new Function("cl=true;obj[" + o + "].click()");
        
        	img[o].onload = new Function("img_center(" + o + ")");
        
        
        
        	/* initial display */
        
        	this.zoom();
        
      .........完整代码请登录后点击上方下载按钮下载查看