js 图片缩放特效代码

更新时间：2009年05月15日 12:51:44 作者：

非常不错nipic使用的图片缩放实现代码。

<!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> <a href="2.jpg" target="_blank"><img src="newwindow.gif" onclick="" alt="" width="16" height="16" border="0"/></a> <img src="resize.gif" onclick="ResizeImage()" alt="" width="16" height="16" /> <img src="close.gif" id="idBoxCancel" alt="close" width="11" height="11"/> </td> </tr> <tr style="text-align:left"> <td><img src="2.jpg" height="500" onmousewheel="return ZoomImg(this)" style="width:800px" id="imgclose" alt="" /></td> </tr> </table> <div>  <img src="2.jpg" alt="" id="iimg" width="120" height="100"/> </div> <script language="javascript" type="text/javascript"> var box = new LightBox("idBox"); $("idBoxCancel").onclick = function(){ box.Close(); } $("imgclose").onclick = function(){ box.Close(); } $("iimg").onclick = function(){ box.Show(); } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

DHTML Slide Show script图片轮换
2008-03-03
cloudgamer出品ImageZoom 图片放大效果
这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。
2010-04-04
一个已封装好的漂亮进度条
一个已封装好的漂亮进度条...
2007-04-04
关于图片按比例自适应缩放的js代码
用户上传照片，照片的尺寸未知；需要生成一个预览，这个预览图要根据提供给用户预览的区域自应用，并且居中；如果图片太大，需要按比例缩放
2011-10-10
最简单的js图片切换效果实现代码
最简单的js图片切换效果实现代码，需要的朋友可以参考下。
2011-09-09
js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结
js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结...
2007-03-03
JS 文件大小判断的实现代码
有时候我们的图片上传等功能，需要验证客户端的图片大小，比较只能上传小于100K的图片，这里客户端先简单的验证下。
2010-04-04
js鼠标移动在title中显示图片的效果代码
当鼠标移动时，在title提示框中，显示出设定的图片。
2009-11-11
js 上传图片预览问题
我们写网页的时候一般的用IE进行开发，一般的人都是按照IE进行些程序，做网站的时候遇到浏览器兼容问题是非常烦躁的事情。
2010-12-12
纯JS图片批量预加载技术代码
一款实用的图片预加载技术，真正实现加载完成显示图片，加载过程中显示进度指示，本加载可以批量进行，将成批图片加载完成才显示，使用循环依次载入图片，并将路径暂存在数组中，加载完成后取出数组数据并显示。
2009-11-11