當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

图片缩放特效

發布時間：2025/3/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了图片缩放特效小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果預覽：

HTML代碼：

Code
<!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?src="JPImage.js"?type="text/javascript">
????
</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>
<br?/>
<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>

JS文件代碼：

Code
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);
}

轉載于:https://www.cnblogs.com/lhking/archive/2009/04/08/1431752.html

總結

以上是生活随笔為你收集整理的图片缩放特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。