打印

图片　放大　特效

faeng220 [楼主]

小秦

银牌会员

帖子: 655
体力: 1322
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

1^# 大中小发表于 2008-5-22 19:36

说实话,这个特效,我不知道该怎么给它命名...也不知道它叫啥名,所以就起了　　图片　放大　特效

这个效果,我前几天在BI上见到有人讨论过,当时没收藏那个帖子...

　这几天苦苦查找,没找到..

这个效果　的原特效是在这　　
http://www.ppg.cn/YesPPG_CN/Prod ... oductCode=031390104
下面的代码,是我按着这个效果写的...

代码跟他的不一样..

　目前这个代码存在一个问题,就是在　如果有滚动条,也就是说,这个图片的位置,不是在第一屏就可以看到的.也就是说,如果滚动条有向下滚动,那么,放在图片上面的效果,就不正确了..　

　测试浏览器.
　Firefox 2.0.0.14　　完全正确.不存在上面说的问题

　IE 6　　存在上面说的问题.

　IE7,IE8,还有其他浏览器,因为电脑上没装,没测试...

希望有条件的,测试以后给发个结果..

有心人,可以继续完善一下..

如果下面的代码不能查看可以在这里看到

http://xqin.cn/temp/effect/1/7.html

还有以下的这些,是在写代码的过程中写的半成品.. [不完整,而且还有问题.]
http://xqin.cn/temp/effect/1/6.html
http://xqin.cn/temp/effect/1/5.html
http://xqin.cn/temp/effect/1/2.html
http://xqin.cn/temp/effect/1/1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 局部放大　单个图片 </title>
  <script type="text/javascript">
  //<![data[
	var zoom = function(){
		this.init();
	};
	zoom.prototype = {
		init : function(){
			this.$('black')==null ? this.append(this.create('div', {id:'black',style:{display:'block',position:'absolute',zIndex:'100',background:'#000',filter:'Alpha(opacity=45)',opacity: '0.45'}})) : this.$('black').style.display = 'none';
			this.$('hoverbox')==null ? this.append(this.create('div', {id:'hoverbox',style:{display:'none',position:'absolute',zIndex:'102',border: '1px solid #999'}})) : this.$('hoverbox').style.display = 'none';
			this.$('mini')==null ? this.append(this.create('div', {id:'mini',style:{display:'block',position:'absolute',left:'-9999px',top:'-9999px',zIndex:'999',border:'1px solid #999'}})) : this.$('mini').style.display = 'none';
		},
		$ : function(o){
			return document.getElementById(o);
		},
		create : function(tag, j){
			return j==null?document.createElement(tag):function(){
				var temp = document.createElement(tag);
				var attribute, i, k;
				for(i in j){
					if(typeof(j[i]) == 'object'){
						attribute = j[i];
						for(k in attribute){
							temp[i][k] =  attribute[k];
						}
					}else{
						temp.setAttribute(i, j[i]);
					}
				}
				return temp;
				}();
		},
		append : function(element, o){
			o = o || document.body;
			return o.appendChild(element);
		},
		getStyle : function(o, s){
			if(o.currentStyle){
				return o.currentStyle[s];
			}else{
				return document.defaultView.getComputedStyle(o, null)[s];
			}
		},
		getXY : function(ev){
			if(ev.pageX || ev.pageY){
				return {
					x : ev.pageX,
					y : ev.pageY
				}
			}
			return {
				x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
				y : ev.clientY + document.body.scrollTop - document.body.clientTop
			}
		},
		getPos : function(o){
			var left = 0, top = 0, bLeft = 0, bTop = 0;
			while(o){
				bLeft = parseInt(this.getStyle(o, 'borderLeftWidth'));
				bTop = parseInt(this.getStyle(o, 'borderTopWidth'));
				left += o.offsetLeft + (isNaN(bLeft) ? 0 : bLeft);
				top  += o.offsetTop + (isNaN(bTop) ? 0 : bTop);
				o = o.offsetParent;
			}
			return {x:left,y:top};
		},
		add : function(o, w, h, w2, h2){
			this.o = o = this.$(o);
			if(o == null || o.tagName.toLowerCase() != 'img')return false;
			this.o.w = w > parseInt(o.width) ? 94 : (w || 94);
			this.o.h = h > parseInt(o.height) ? 102 : (h || 102);
			o.zoom = this;
			this.big = o.big = this.append(this.create('img', {id : 'mini_'+o.id, src : (o.getAttribute('big') || o.src), style:{position:'absolute',left:'-9999px',top:'-9999px'}}));//大图
			this.o.w2 = w2 > parseInt(this.big.width) ? o.width-46 : (w2 || o.width-45);
			this.o.h2 = h2 > parseInt(this.big.height) ? o.height-46 : (h2 || o.height-46);
			if(this.big.src == this.o.src){
				this.scaleW = o.scaleW  = 1;
				this.scaleH = o.scaleH  = 1;
			}else{
				this.scaleW = o.scaleW  = Math.floor(this.big.width/o.width+0.5);
				this.scaleH = o.scaleH  = Math.floor(this.big.height/o.height+0.5);
			}
			o.onmouseover = function(ev){
				this.zoom.big = this.big;
				this.zoom.scaleW = this.scaleW;
				this.zoom.scaleH = this.scaleH;
				this.zoom.o = this;
				this.zoom.reset(ev);
				var hov = this.zoom.$('hoverbox');
				hov.zoom = this.zoom;
				hov.onmousemove = function(ev){
					ev = ev || window.event;
					var po = this.zoom.getXY(ev);
					var p = this.zoom.getNewPos(po.x, po.y, this.pos);
					this.style.left = p.x + 'px';
					this.style.top = p.y + 'px';
					this.style.backgroundPosition = (this.pos.left-p.x-1)+'px '+(this.pos.top-p.y-1)+'px';
					this.zoom.$('mini').style.backgroundPosition = (this.pos.left-p.x-1)*this.zoom.scaleW+'px '+(this.pos.top-p.y-1)*this.zoom.scaleH+'px';
				}
				hov.onmouseout = function(){
					this.style.display = this.zoom.$('mini').style.display = this.zoom.$('black').style.display = 'none';
				}
			}
		},
		getNewPos : function(x, y, pos){
			x = parseInt(x) - this.o.w/2;
			y = parseInt(y) - this.o.h/2;
			if(x <= pos.left){
				x = pos.left;
			}
			if(y <= pos.top){
				y = pos.top;
			}
			if(x+(this.o.w) >= pos.right){
				x = pos.right - this.o.w-2;
			}
			if(y+(this.o.h) >= pos.bottom){
				y = pos.bottom - this.o.h-2;
			}
			return {
				x : x,
				y : y
			};
		},
		reset : function(ev){
			ev = ev || window.event;
			var target = ev.srcElement || ev.target;
			var x, y, w, h, black=this.$('black'),hoverbox=this.$('hoverbox'),mini=this.$('mini');
			var pos = this.getPos(target);
			mini.style.display = hoverbox.style.display = black.style.display = 'block';
			mini.style.width = this.o.w2 + 'px';
			mini.style.height = this.o.h2 + 'px';
			mini.style.left = (pos.x + target.width + 4) + 'px';
			mini.style.top = pos.y + 'px';
			mini.style.background = 'url(' + this.big.src + ') no-repeat 0px 0px';
			black.style.left = pos.x + 'px';
			black.style.top = pos.y + 'px';
			black.style.width = target.width + 'px';
			black.style.height = target.height + 'px';
			hoverbox.pos = {
				top : parseInt(pos.y),
				right : parseInt(pos.x + target.width),
				bottom : parseInt(pos.y + target.height),
				left : parseInt(pos.x)
			};
			var pos = this.getXY(ev||window.event);
			var pp = this.getNewPos(pos.x, pos.y, hoverbox.pos);
			hoverbox.style.width = this.o.w + 'px';
			hoverbox.style.height = this.o.h + 'px';
			hoverbox.style.left = pp.x + 'px';
			hoverbox.style.top = pp.y + 'px';
			hoverbox.style.background = 'url(' + this.o.src + ') no-repeat 0px 0px';
		}
	};
	window.onload = function(){
		var a = new zoom();	//声明一个对象
		/*
			zoom 对象
			方法:(只有一个^_^!!!)
				add(id, w, h, w2, h2);
					id	: 图片id
					w	: 在图片上显示的方框的宽度
					h	: 图片上显示的方框的高度
					w2	: 在右侧放大区域的宽度
					h2	: 在右侧放大区域的高度
				除了　参数　id　是必须的之外,其他的都是可选的
			<img />标签书写方法
			<img src="" big="" **** />
			src 为小图地址
			big 为大图地址[可省略,如果省略,在右侧显示的图片将和左侧一样]
		*/
		a.add('img1');
		a.add('img2', 130, 130, 230, 273);
	}
	//]]-->
  </script>
 </head>
 <body>
 <h1>效果测试!!</h1>
 <img id="img1" src='http://xqin.cn/temp/effect/1/001.jpg' big='http://xqin.cn/temp/effect/1/002.jpg' />
 <img id="img2" src='http://xqin.cn/temp/effect/1/003.jpg' />
 <img id="img3" src='http://xqin.cn/temp/effect/1/001.jpg' />
 </body>
</html>

提示：您可以先修改部分代码再运行

下面的代码是,出现我所描述的问题的情况:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 局部放大　单个图片 </title>
  <script type="text/javascript">
  //<![data[
	var zoom = function(){
		this.init();
	};
	zoom.prototype = {
		init : function(){
			this.$('black')==null ? this.append(this.create('div', {id:'black',style:{display:'block',position:'absolute',zIndex:'100',background:'#000',filter:'Alpha(opacity=45)',opacity: '0.45'}})) : this.$('black').style.display = 'none';
			this.$('hoverbox')==null ? this.append(this.create('div', {id:'hoverbox',style:{display:'none',position:'absolute',zIndex:'102',border: '1px solid #999'}})) : this.$('hoverbox').style.display = 'none';
			this.$('mini')==null ? this.append(this.create('div', {id:'mini',style:{display:'block',position:'absolute',left:'-9999px',top:'-9999px',zIndex:'999',border:'1px solid #999'}})) : this.$('mini').style.display = 'none';
		},
		$ : function(o){
			return document.getElementById(o);
		},
		create : function(tag, j){
			return j==null?document.createElement(tag):function(){
				var temp = document.createElement(tag);
				var attribute, i, k;
				for(i in j){
					if(typeof(j[i]) == 'object'){
						attribute = j[i];
						for(k in attribute){
							temp[i][k] =  attribute[k];
						}
					}else{
						temp.setAttribute(i, j[i]);
					}
				}
				return temp;
				}();
		},
		append : function(element, o){
			o = o || document.body;
			return o.appendChild(element);
		},
		getStyle : function(o, s){
			if(o.currentStyle){
				return o.currentStyle[s];
			}else{
				return document.defaultView.getComputedStyle(o, null)[s];
			}
		},
		getXY : function(ev){
			if(ev.pageX || ev.pageY){
				return {
					x : ev.pageX,
					y : ev.pageY
				}
			}
			return {
				x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
				y : ev.clientY + document.body.scrollTop - document.body.clientTop
			}
		},
		getPos : function(o){
			var left = 0, top = 0, bLeft = 0, bTop = 0;
			while(o){
				bLeft = parseInt(this.getStyle(o, 'borderLeftWidth'));
				bTop = parseInt(this.getStyle(o, 'borderTopWidth'));
				left += o.offsetLeft + (isNaN(bLeft) ? 0 : bLeft);
				top  += o.offsetTop + (isNaN(bTop) ? 0 : bTop);
				o = o.offsetParent;
			}
			return {x:left,y:top};
		},
		add : function(o, w, h, w2, h2){
			this.o = o = this.$(o);
			if(o == null || o.tagName.toLowerCase() != 'img')return false;
			this.o.w = w > parseInt(o.width) ? 94 : (w || 94);
			this.o.h = h > parseInt(o.height) ? 102 : (h || 102);
			o.zoom = this;
			this.big = o.big = this.append(this.create('img', {id : 'mini_'+o.id, src : (o.getAttribute('big') || o.src), style:{position:'absolute',left:'-9999px',top:'-9999px'}}));//大图
			this.o.w2 = w2 > parseInt(this.big.width) ? o.width-46 : (w2 || o.width-45);
			this.o.h2 = h2 > parseInt(this.big.height) ? o.height-46 : (h2 || o.height-46);
			if(this.big.src == this.o.src){
				this.scaleW = o.scaleW  = 1;
				this.scaleH = o.scaleH  = 1;
			}else{
				this.scaleW = o.scaleW  = Math.floor(this.big.width/o.width+0.5);
				this.scaleH = o.scaleH  = Math.floor(this.big.height/o.height+0.5);
			}
			o.onmouseover = function(ev){
				this.zoom.big = this.big;
				this.zoom.scaleW = this.scaleW;
				this.zoom.scaleH = this.scaleH;
				this.zoom.o = this;
				this.zoom.reset(ev);
				var hov = this.zoom.$('hoverbox');
				hov.zoom = this.zoom;
				hov.onmousemove = function(ev){
					ev = ev || window.event;
					var po = this.zoom.getXY(ev);
					var p = this.zoom.getNewPos(po.x, po.y, this.pos);
					this.style.left = p.x + 'px';
					this.style.top = p.y + 'px';
					this.style.backgroundPosition = (this.pos.left-p.x-1)+'px '+(this.pos.top-p.y-1)+'px';
					this.zoom.$('mini').style.backgroundPosition = (this.pos.left-p.x-1)*this.zoom.scaleW+'px '+(this.pos.top-p.y-1)*this.zoom.scaleH+'px';
				}
				hov.onmouseout = function(){
					this.style.display = this.zoom.$('mini').style.display = this.zoom.$('black').style.display = 'none';
				}
			}
		},
		getNewPos : function(x, y, pos){
			x = parseInt(x) - this.o.w/2;
			y = parseInt(y) - this.o.h/2;
			if(x <= pos.left){
				x = pos.left;
			}
			if(y <= pos.top){
				y = pos.top;
			}
			if(x+(this.o.w) >= pos.right){
				x = pos.right - this.o.w-2;
			}
			if(y+(this.o.h) >= pos.bottom){
				y = pos.bottom - this.o.h-2;
			}
			return {
				x : x,
				y : y
			};
		},
		reset : function(ev){
			ev = ev || window.event;
			var target = ev.srcElement || ev.target;
			var x, y, w, h, black=this.$('black'),hoverbox=this.$('hoverbox'),mini=this.$('mini');
			var pos = this.getPos(target);
			mini.style.display = hoverbox.style.display = black.style.display = 'block';
			mini.style.width = this.o.w2 + 'px';
			mini.style.height = this.o.h2 + 'px';
			mini.style.left = (pos.x + target.width + 4) + 'px';
			mini.style.top = pos.y + 'px';
			mini.style.background = 'url(' + this.big.src + ') no-repeat 0px 0px';
			black.style.left = pos.x + 'px';
			black.style.top = pos.y + 'px';
			black.style.width = target.width + 'px';
			black.style.height = target.height + 'px';
			hoverbox.pos = {
				top : parseInt(pos.y),
				right : parseInt(pos.x + target.width),
				bottom : parseInt(pos.y + target.height),
				left : parseInt(pos.x)
			};
			var pos = this.getXY(ev||window.event);
			var pp = this.getNewPos(pos.x, pos.y, hoverbox.pos);
			hoverbox.style.width = this.o.w + 'px';
			hoverbox.style.height = this.o.h + 'px';
			hoverbox.style.left = pp.x + 'px';
			hoverbox.style.top = pp.y + 'px';
			hoverbox.style.background = 'url(' + this.o.src + ') no-repeat 0px 0px';
		}
	};
	window.onload = function(){
		var a = new zoom();	//声明一个对象
		/*
			zoom 对象
			方法:(只有一个^_^!!!)
				add(id, w, h, w2, h2);
					id	: 图片id
					w	: 在图片上显示的方框的宽度
					h	: 图片上显示的方框的高度
					w2	: 在右侧放大区域的宽度
					h2	: 在右侧放大区域的高度
				除了　参数　id　是必须的之外,其他的都是可选的
			<img />标签书写方法
			<img src="" big="" **** />
			src 为小图地址
			big 为大图地址[可省略,如果省略,在右侧显示的图片将和左侧一样]
		*/
		a.add('img1');
		a.add('img3');
		a.add('img4');
		a.add('img5');
		a.add('img2', 130, 130, 230, 273);
	}
	//]]-->
  </script>
 </head>
 <body>
 <h1>效果测试!!</h1>
 <img id="img1" src='http://xqin.cn/temp/effect/1/001.jpg' big='http://xqin.cn/temp/effect/1/002.jpg' /><br/>
 <img id="img2" src='http://xqin.cn/temp/effect/1/003.jpg' /><br/>
 <img id="img3" src='http://xqin.cn/temp/effect/1/001.jpg' /><br/>
 <img id="img4" src='http://xqin.cn/temp/effect/1/003.jpg' /><br/>
 <img id="img5" src='http://xqin.cn/temp/effect/1/001.jpg' />
 </body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 faeng220 于 2008-5-22 19:39 编辑 ]

偶系小秦！

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

99813231

初级会员

帖子: 86
体力: 185
威望: 0
当前: 江苏南通
离线: 1 天

2^# 大中小发表于 2008-6-15 10:22

厉害,学习!

QQ：2264911

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

7yeee

初级会员

帖子: 53
体力: 120
威望: 0
当前: 广东珠海
离线: 8 天

3^# 大中小发表于 2008-6-15 13:20

收藏了。谢谢。

TOP

请大家尊重和保护奥运知识产权。

mudoo

经典木头

中级会员

帖子: 260
体力: 430
威望: 4
当前: 福建泉州

专长 网页设计,前端制作,JS

4^# 大中小发表于 2008-6-15 13:23

貌似在IE7就罢工了.

除了第一张图鼠标移动遮罩框会跟着动.
其他的都只有X轴动.Y轴...罢工.

[ 本帖最后由 mudoo 于 2008-6-15 13:25 编辑 ]

http://hi.baidu.com/mt20

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

tmulmt

中级会员

帖子: 465
体力: 237
威望: 0
当前: 大洋州澳大利亚
离线: 1 天

5^# 大中小发表于 2008-6-15 13:24

做个记号，先收之。

多谢楼主。

TOP

dzahz

新手上路

帖子: 10
体力: 16
威望: 0
当前: 江苏苏州
离线: 4 天

6^# 大中小发表于 2008-6-16 17:28

怎么到处都是这件衣服？都看到好几次了

TOP

faeng220 [楼主]

小秦

银牌会员

帖子: 655
体力: 1322
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

7^# 大中小发表于 2008-7-2 11:34

OK问题解决..
原来的是document.body.scrollTop 改为　document.documentElement.scrollTop 就可以取到值了..
原来的document.body.XXX取不到值..改灰　document.documentElement.XXX就可以取到了..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 局部放大　单个图片 </title>
  <script type="text/javascript">
  //<![data[
	var zoom = function(){
		this.init();
	};
	zoom.prototype = {
		init : function(){
			this.$('black')==null ? this.append(this.create('div', {id:'black',style:{display:'block',position:'absolute',zIndex:'100',background:'#000',filter:'Alpha(opacity=45)',opacity: '0.45'}})) : this.$('black').style.display = 'none';
			this.$('hoverbox')==null ? this.append(this.create('div', {id:'hoverbox',style:{display:'none',position:'absolute',zIndex:'102',border: '1px solid #999'}})) : this.$('hoverbox').style.display = 'none';
			this.$('mini')==null ? this.append(this.create('div', {id:'mini',style:{display:'block',position:'absolute',left:'-9999px',top:'-9999px',zIndex:'999',border:'1px solid #999'}})) : this.$('mini').style.display = 'none';
		},
		$ : function(o){
			return document.getElementById(o);
		},
		create : function(tag, j){
			return j==null?document.createElement(tag):function(){
				var temp = document.createElement(tag);
				var attribute, i, k;
				for(i in j){
					if(typeof(j[i]) == 'object'){
						attribute = j[i];
						for(k in attribute){
							temp[i][k] =  attribute[k];
						}
					}else{
						temp.setAttribute(i, j[i]);
					}
				}
				return temp;
				}();
		},
		append : function(element, o){
			o = o || document.body;
			return o.appendChild(element);
		},
		getStyle : function(o, s){
			if(o.currentStyle){
				return o.currentStyle[s];
			}else{
				return document.defaultView.getComputedStyle(o, null)[s];
			}
		},
		getXY : function(ev){
			if(ev.pageX || ev.pageY){
				return {
					x : ev.pageX,
					y : ev.pageY
				}
			}
			return {
				x : ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
				y : ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
			}
		},
		getPos : function(o){
			var left = 0, top = 0, bLeft = 0, bTop = 0;
			while(o){
				bLeft = parseInt(this.getStyle(o, 'borderLeftWidth'));
				bTop = parseInt(this.getStyle(o, 'borderTopWidth'));
				left += o.offsetLeft + (isNaN(bLeft) ? 0 : bLeft);
				top  += o.offsetTop + (isNaN(bTop) ? 0 : bTop);
				o = o.offsetParent;
			}
			return {x:left,y:top};
		},
		add : function(o, w, h, w2, h2){
			this.o = o = this.$(o);
			if(o == null || o.tagName.toLowerCase() != 'img')return false;
			this.o.w = w > parseInt(o.width) ? 94 : (w || 94);
			this.o.h = h > parseInt(o.height) ? 102 : (h || 102);
			o.zoom = this;
			this.big = o.big = this.append(this.create('img', {id : 'mini_'+o.id, src : (o.getAttribute('big') || o.src), style:{position:'absolute',left:'-9999px',top:'-9999px'}}));//大图
			this.o.w2 = w2 > parseInt(this.big.width) ? o.width-46 : (w2 || o.width-45);
			this.o.h2 = h2 > parseInt(this.big.height) ? o.height-46 : (h2 || o.height-46);
			if(this.big.src == this.o.src){
				this.scaleW = o.scaleW  = 1;
				this.scaleH = o.scaleH  = 1;
			}else{
				this.scaleW = o.scaleW  = Math.floor(this.big.width/o.width+0.5);
				this.scaleH = o.scaleH  = Math.floor(this.big.height/o.height+0.5);
			}
			o.onmouseover = function(ev){
				this.zoom.big = this.big;
				this.zoom.scaleW = this.scaleW;
				this.zoom.scaleH = this.scaleH;
				this.zoom.o = this;
				this.zoom.reset(ev);
				var hov = this.zoom.$('hoverbox');
				hov.zoom = this.zoom;
				hov.onmousemove = function(ev){
					ev = ev || window.event;
					var po = this.zoom.getXY(ev);
					var p = this.zoom.getNewPos(po.x, po.y, this.pos);
					this.style.left = p.x + 'px';
					this.style.top = p.y + 'px';
					this.style.backgroundPosition = (this.pos.left-p.x-1)+'px '+(this.pos.top-p.y-1)+'px';
					this.zoom.$('mini').style.backgroundPosition = (this.pos.left-p.x-1)*this.zoom.scaleW+'px '+(this.pos.top-p.y-1)*this.zoom.scaleH+'px';
				}
				hov.onmouseout = function(){
					this.style.display = this.zoom.$('mini').style.display = this.zoom.$('black').style.display = 'none';
				}
			}
		},
		getNewPos : function(x, y, pos){
			x = parseInt(x) - this.o.w/2;
			y = parseInt(y) - this.o.h/2;
			if(x <= pos.left){
				x = pos.left;
			}
			if(y <= pos.top){
				y = pos.top;
			}
			if(x+(this.o.w) >= pos.right){
				x = pos.right - this.o.w-2;
			}
			if(y+(this.o.h) >= pos.bottom){
				y = pos.bottom - this.o.h-2;
			}
			return {
				x : x,
				y : y
			};
		},
		reset : function(ev){
			ev = ev || window.event;
			var target = ev.srcElement || ev.target;
			var x, y, w, h, black=this.$('black'),hoverbox=this.$('hoverbox'),mini=this.$('mini');
			var pos = this.getPos(target);
			mini.style.display = hoverbox.style.display = black.style.display = 'block';
			mini.style.width = this.o.w2 + 'px';
			mini.style.height = this.o.h2 + 'px';
			mini.style.left = (pos.x + target.width + 4) + 'px';
			mini.style.top = pos.y + 'px';
			mini.style.background = 'url(' + this.big.src + ') no-repeat 0px 0px';
			black.style.left = pos.x + 'px';
			black.style.top = pos.y + 'px';
			black.style.width = target.width + 'px';
			black.style.height = target.height + 'px';
			hoverbox.pos = {
				top : parseInt(pos.y),
				right : parseInt(pos.x + target.width),
				bottom : parseInt(pos.y + target.height),
				left : parseInt(pos.x)
			};
			var pos = this.getXY(ev||window.event);
			var pp = this.getNewPos(pos.x, pos.y, hoverbox.pos);
			hoverbox.style.width = this.o.w + 'px';
			hoverbox.style.height = this.o.h + 'px';
			hoverbox.style.left = pp.x + 'px';
			hoverbox.style.top = pp.y + 'px';
			hoverbox.style.background = 'url(' + this.o.src + ') no-repeat 0px 0px';
		}
	};
	window.onload = function(){
		var a = new zoom();	//声明一个对象
		/*
			zoom 对象
			方法:(只有一个^_^!!!)
				add(id, w, h, w2, h2);
					id	: 图片id
					w	: 在图片上显示的方框的宽度
					h	: 图片上显示的方框的高度
					w2	: 在右侧放大区域的宽度
					h2	: 在右侧放大区域的高度
				除了　参数　id　是必须的之外,其他的都是可选的
			<img />标签书写方法
			<img src="" big="" **** />
			src 为小图地址
			big 为大图地址[可省略,如果省略,在右侧显示的图片将和左侧一样]
		*/
		a.add('img1');
		a.add('img3');
		a.add('img4');
		a.add('img5');
		a.add('img2', 130, 130, 230, 273);
	}
	//]]-->
  </script>
 </head>
 <body>
 <h1>效果测试!!</h1>
 <img id="img1" src='http://xqin.cn/temp/effect/1/001.jpg' big='http://xqin.cn/temp/effect/1/002.jpg' /><br/>
 <img id="img2" src='http://xqin.cn/temp/effect/1/003.jpg' /><br/>
 <img id="img3" src='http://xqin.cn/temp/effect/1/001.jpg' /><br/>
 <img id="img4" src='http://xqin.cn/temp/effect/1/003.jpg' /><br/>
 <img id="img5" src='http://xqin.cn/temp/effect/1/001.jpg' />
 </body>
</html>

提示：您可以先修改部分代码再运行

偶系小秦！

TOP

fen520718

丹妹子

中级会员

帖子: 642
体力: 291
威望: 0
当前: 广东深圳
离线: 2 天

专长 网页设计

8^# 大中小发表于 2008-7-2 11:37

不错..

堅強，勇敢，偽裝,向上是因為保護受傷的心

TOP

yangyhoo

新手上路

帖子: 1
体力: 7
威望: 0
当前: 北京丰台区
离线: 28 天

9^# 大中小发表于 2008-7-8 15:46

非常好!

TOP

zhouliangwei

新手上路

帖子: 6
体力: 17
威望: 0
当前: 辽宁大连
离线: 55 天

10^# 大中小发表于 2008-7-12 18:02

太强大了，I lake

TOP

fonqing

一路蹒跚

银牌会员

帖子: 856
体力: 1763
威望: 3
当前: 山东潍坊

专长 JS,PHP,MySQL

11^# 大中小发表于 2008-7-12 19:09

IE7 还是有偏差！

Boolome

TOP

lbx972

初级会员

帖子: 14
体力: 53
威望: 0

12^# 大中小发表于 2008-7-12 20:47

很不错！

TOP

aitom

仝草

初级会员

帖子: 122
体力: 187
威望: 0
当前: 上海普陀
离线: 1 天

专长 网页设计,平面,美编

13^# 大中小发表于 2008-7-21 16:33

！good

www.aitom.net.cn

TOP

qinxu234

新手上路

帖子: 10
体力: 26
威望: 0
当前: 江西南昌
离线: 6 天

14^# 大中小发表于 2008-7-21 17:33

谢谢··收藏了！！！！

TOP

图片 放大 特效

图片　放大　特效