js 图片缩放特效代码

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>图片特效</title> 
<style type="text/css"> 
.lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:5%; left:5%;} 
.lightbox dt{background:#f4f4f4;} 
</style> 
<script type="text/javascript"> 
var isIE = (document.all) ? true : false; 
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); 
var $ = function (id) 
{ 
return "string" == typeof id ? document.getElementById(id) : id; 
}; 
var Class = 
{ 
create: function() 
{ 
return function() { this.initialize.apply(this, arguments); } 
} 
}; 
var Extend = function(destination, source) 
{ 
for (var property in source) 
{ 
destination[property] = source[property]; 
} 
}; 
var Bind = function(object, fun) 
{ 
return function() 
{ 
return fun.apply(object, arguments); 
} 
}; 
var Each = function(list, fun) 
{ 
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } 
}; 
var Contains = function(a, b) 
{ 
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); 
}; 
var OverLay = Class.create(); 
OverLay.prototype = 
{ 
initialize: function(options) 
{ 
this.SetOptions(options); 
this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]); 
this.Color = this.options.Color; 
this.Opacity = parseInt(this.options.Opacity); 
this.zIndex = parseInt(this.options.zIndex);

with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; } 
if(isIE6){ 
this.Lay.style.position = "absolute"; 
//ie6设置覆盖层大小程序 
this._resize = Bind(this, function(){ 
this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; 
this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; 
}); 
//遮盖select 
this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>' 
} 
}, 
//设置默认属性 
SetOptions: function(options) 
{ 
this.options = 
{//默认值 
Lay: null,//覆盖层对象 
Color: "#000",//背景色 
Opacity: 50,//透明度(0-100) 
zIndex: 1000//层叠顺序 
}; 
Extend(this.options, options || {}); 
}, 
//显示 
Show: function() 
{ 
//兼容ie6 
if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); } 
//设置样式 
with(this.Lay.style) 
{ 
//设置透明度 
isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100; 
backgroundColor = this.Color; display = "block"; 
} 
}, 
//关闭 
Close: function() 
{ 
this.Lay.style.display = "none"; 
if(isIE6){ window.detachEvent("onresize", this._resize); } 
} 
};

var LightBox = Class.create(); 
LightBox.prototype = 
{ 
initialize: function(box, options) 
{ 
this.Box = $(box);//显示层 
this.OverLay = new OverLay(options);//覆盖层 
this.SetOptions(options);

this.Fixed = !!this.options.Fixed; 
this.Over = !!this.options.Over; 
this.Center = !!this.options.Center; 
this.onShow = this.options.onShow;

this.Box.style.zIndex = this.OverLay.zIndex + 1; 
this.Box.style.display = "none"; 
//兼容ie6用的属性 
if(isIE6) 
{ 
this._top = this._left = 0; this._select = []; 
this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); }); 
} 
}, 
//设置默认属性 
SetOptions: function(options) 
{ 
this.options = 
{//默认值 
Over: true,//是否显示覆盖层 
Fixed: false,//是否固定定位 
Center: false,//是否居中 
onShow: function(){}//显示时执行 
}; 
Extend(this.options, options || {}); 
}, 
//兼容ie6的固定定位程序 
SetFixed: function() 
{ 
this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px"; 
this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px";

this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft; 
}, 
//兼容ie6的居中定位程序 
SetCenter: function() 
{ 
this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px"; 
this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px"; 
}, 
//显示 
Show: function(options) 
{ 
//固定定位 
this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute"; 
//覆盖层 
this.Over && this.OverLay.Show(); 
this.Box.style.display = "block"; 
//居中 
if(this.Center) 
{ 
this.Box.style.top = this.Box.style.left = "50%"; 
//设置margin 
if(this.Fixed) 
{ 
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px"; 
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px"; 
}else{ 
this.SetCenter(); 
} 
} 
//兼容ie6 
if(isIE6) 
{ 
if(!this.Over) 
{ 
//没有覆盖层ie6需要把不在Box上的select隐藏 
this._select.length = 0; 
Each(document.getElementsByTagName("select"), Bind(this, function(o){ 
if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); } 
})) 
} 
//设置显示位置 
this.Center ? this.SetCenter() : this.Fixed && this.SetFixed(); 
//设置定位 
this.Fixed && window.attachEvent("onscroll", this._fixed); 
} 
this.onShow(); 
}, 
//关闭 
Close: function() 
{ 
this.Box.style.display = "none"; 
this.OverLay.Close(); 
if(isIE6) 
{ 
window.detachEvent("onscroll", this._fixed); 
Each(this._select, function(o){ o.style.visibility = "visible"; }); 
} 
} 
}; 
function ZoomImg(o) 
{ 
var zoom = parseInt(o.style.zoom, 10) || 100; 
zoom += event.wheelDelta / 12; 
if(zoom >60&&zoom<120) 
o.style.zoom = zoom + '%'; 
return false; 
} 
function ResizeImage() 
{ 
var img=document.getElementById("imgclose"); 
var a=img.width; 
var b=img.height; 
//移除img的width,这样就得到原始的长了,不过图片也放大了,上面的代码不会,只是使用Image对象来获取原始的长 
img.removeAttribute("width"); 
img.removeAttribute("height"); 
var w=img.width; 
var h=img.height; 
document.getElementById("").style.width=w; 
document.getElementById("").style.height=h; 
alert(w+" "+h); 
} 
</script> 
</head> 
<body>

<table id="idBox" class="lightbox"> 
<tr id="idBoxHead" style="text-align:right"> 
<td> 
<span style="font-size:12px">鼠标滚轮放大图片</span> 
如需引入外部Js需刷新才能执行]</div>

<hr>

</div>
			</div>

</div>
       
      <div class="col-md-4">
	
	
	<div class="panel panel-default">
		
		<div class="panel-heading"> <a href="/php/">PHP教程</a></div>
		<div class="list-group">
<a href="/php/1.html" class="list-group-item">PHP简介</a>
<a href="/php/8.html" class="list-group-item">PHP基本语法</a>
<a href="/php/12.html" class="list-group-item">PHP类型</a>
<a href="/php/24.html" class="list-group-item">PHP变量</a>
<a href="/php/34.html" class="list-group-item">PHP运算符</a>
<a href="/php/47.html" class="list-group-item">PHP控制结构</a>
<a href="/php/67.html" class="list-group-item">PHP函数</a>
<a href="/php/74.html" class="list-group-item">PHP类与对象</a>
<a href="/php/110.html" class="list-group-item">PHP异常处理</a>
<a href="/php/function.php" class="list-group-item">函数库分类</a>
						     
				
						
					</div>
					
	</div>
				
</div>

</div>

<div class="panel panel-default">
        <div class="panel-heading">快速导航</div>
        <div class="panel-body">
                       <a href="/list.php?id=1">PHP</a>
<a href="/list.php?id=2">MySQL</a>
<a href="/list.php?id=3">HTML</a>
<a href="/list.php?id=4">CSS</a>
<a href="/list.php?id=5">JavaScript</a>
<a href="/list.php?id=6">MSSQL</a>
<a href="/list.php?id=10">AJAX</a>

<a href="/list.php?id=14">Linux</a>
<a href="/list.php?id=17">Mac</a>
<a href="/list.php?id=7">ASP</a>
<a href="/list.php?id=11">服务器</a>

<a href="/list.php?id=15">SQL</a>
<a href="/list.php?id=16">jQuery</a>

<a href="/list.php?id=18">C#</a>
<a href="/list.php?id=19">C++</a>
<a href="/list.php?id=20">java</a>
<a href="/list.php?id=21">Android</a>
<a href="/list.php?id=22">IOS</a>
<a href="/list.php?id=23">oracle</a>
<a href="/list.php?id=24">MongoDB</a>

<a href="/list.php?id=26">SQLite</a>
<a href="http://wamp.phpstudy.net/">wamp</a>
<a href="/jiaotong/">交通频道</a>   
	<span style="display:none">

</span>
                    </div>
    </div>

<hr>

</div>

<div class="bottom">
	
	<div class="container">
   Copyright © 2016 phpStudy  | 豫ICP备2021030365号-3<script src="/images/foot.js?1"></script>
    </div>
</div>
<script src="/js/foot2.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>