當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS图片放大查看效果!
生活随笔
收集整理的這篇文章主要介紹了
JS图片放大查看效果!
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
http://bbs.blueidea.com/thread-2812683-1-1.html
http://bbs.blueidea.com/thread-2814846-1-1.html
應用效果
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">
<html>
<head>
<title>Javascript?Images?zoom-out?view?sample.?Brought?to?you?by?斬夢人.天天?
QQ:22062019</title>
<script?language="JavaScript">
<!--
var?dshowW=450;?//默認預覽圖寬度(可由小圖的showW,showH動態指定)
var?dshowH=300;?//默認預覽圖高度
var?bborder=1;?//大圖邊框
var?sborder=1;?//小圖邊框
var?vborder=1;?//小預覽圖邊框
var?bigW,bigH,smallW,smallH,showW,showH,viewW,viewH;//大圖,小圖,預覽窗,小預覽窗
var?nview,nflag,picstatus,tempo,abox,zoomX,zoomY;
//初始化
window.onload=function?init(){
????isIE=window.event?1:0;
????picshow.style.borderWidth=bborder;
????picshow.style.width=dshowW;
????picshow.style.height=dshowH;
????bpic.style.display="";
????abox=document.body.getElementsByTagName("div");?//初始化所有小圖
????for?(n=0;n<abox.length;n++)
????????if?(abox[n].className=="picbox"){
????????????var?o=abox[n];
????????????var?view=getview(o);
????????????var?img=getimg(o);
????????????view.style.borderWidth=vborder;
????????????o.style.borderWidth=sborder;
????????????o.style.width=img.width+sborder*2*isIE;
????????????o.style.height=img.height+sborder*2*isIE;
????????????o.setAttribute("pid",n);?//小圖標記,主鍵唯一
????????????if?(o.getAttribute("show")=="show")?loadpic(o);
????????????o.onmouseout=function?(){setTimeout(nview.style.visibility='hidden');}
????????}
}
//載入圖片
function?loadpic(o){?
????var?view=getview(o);
????var?img=getimg(o);
????bpic.style.display="none";
????nview=view;?//標記活動小預覽窗
????nflag=o.getAttribute("pid");?//當前圖片標記,用來判斷切換圖片
????//改變預覽窗大小
????if?(img.getAttribute("showW")!=null)?showW=parseInt(img.getAttribute("showW"));
????else?showW=dshowW;
????if?(img.getAttribute("showH")!=null)?showH=parseInt(img.getAttribute("showH"));
????else?showH=dshowH;
????picshow.style.width=showW+isIE*bborder*2;
????picshow.style.height=showH+isIE*bborder*2;
????loading.style.marginTop=(showH-loading.offsetHeight)/2;
????if?(img.getAttribute("dLeft"))?bpic.style.marginLeft=-parseInt(img.getAttribute("dLeft"));
????if?(img.getAttribute("dTop"))?bpic.style.marginTop=-parseInt(img.getAttribute("dTop"));
????picstatus="loading";
????tempo=o;
????bpic.src=img.lowsrc;
}
//圖片載入完成
function?loaddone(o){
????bpic.style.display="block";
????var?view=getview(o);
????var?img=getimg(o);
????smallW=img.width;?//改變小圖,小預覽窗大小
????smallH=img.height;
????bigW=bpic.width;
????bigH=bpic.height;
????if?(showW>bigW){//如果預覽圖比大圖大,則等于大圖
????????showW=bigW;
????????picshow.style.width=showW+isIE*bborder*2;
????}
????if?(showH>bigH){
????????showH=bigH;
????????picshow.style.height=showH+isIE*bborder*2;
????}
????zoomX=bigW/smallW;
????zoomY=bigH/smallH;
????viewW=showW*smallW/bigW;
????viewH=showH*smallH/bigH;
????nview.style.width=viewW-vborder*2*!isIE;
????nview.style.height=viewH-vborder*2*!isIE;
????nview.style.display="block";?
????img.style.top=-nview.offsetHeight;
????if?(!nview.style.left)?nview.style.left=0;
????if?(!nview.style.top)?nview.style.top=0;
????picstatus="done"
}
//移動事件
function?move(e,o,flag){?//flag,對象來源標記,FF下view的定位需要
????o=isIE?o.parentElement:o.parentNode;
????if?(o.getAttribute("pid")!=nflag){?//判斷是否切換了圖片
????????nview.style.visibility="hidden";?
????????loadpic(o);?//載入新圖片
????}
????if?(picstatus="done"){?//如果大圖載入完畢
????????if?(nview.style.visibility="hidden")?nview.style.visibility="visible";
????????var?e=isIE?window.event:e;
????????if?(isIE==0){?//分別獲取FF或IE的view位置
????????????if?(flag==1){?//由于o的來源不同,使用不同的算法定位
????????????????vX=e.layerX+parseInt(nview.style.left)-nview.offsetWidth/2-vborder;
????????????????vY=e.layerY+parseInt(nview.style.top)-nview.offsetHeight/2-vborder;
????????????}else{
????????????????vX=e.layerX-nview.offsetWidth/2-vborder;
????????????????vY=e.layerY-nview.offsetHeight/2-vborder;
????????????}
????????}
????????else{
????????????vX=e.offsetX-nview.offsetWidth/2;
????????????vY=e.offsetY-nview.offsetHeight/2;
????????}?
????????if?(vX?<?0)?vX?=?0;?//邊界判斷,不能超出縮略圖的范圍
????????if?(vY?<?0)?vY?=?0;
????????if?(vX?>?smallW-viewW)?{vX=smallW-viewW;mX=bigW-showW}else{mX=vX?*?zoomX;}
????????if?(vY?>?smallH-viewH)?{vY=smallH-viewH;mY=bigH-showH}else{mY=vY?*?zoomY;}
????????nview.style.left=vX;
????????nview.style.top=vY;
????????bpic.style.marginLeft?=?-?mX;?//刷新預覽窗口
????????bpic.style.marginTop?=?-?mY;
????}
}
//得到view
function?getview(o){
????var?arr=o.getElementsByTagName("div");
????var?n;
????for?(n=0;n<arr.length;n++)
????????if?(arr[n].className="view")?return?arr[n];
}
//得到img
function?getimg(o){
????var?arr=o.getElementsByTagName("img");
????var?n;
????for?(n=0;n<arr.length;n++)
????????if?(arr[n].className="spic")?return?arr[n];
}
//-->
</script>
<style?type="text/css">
<!--
*{}{padding:0;margin:0}
body{}{color:white;background:black;font:bold?12px/18px?tahoma;color:white;}
#picshow{}{border:1px?red?solid;width:200;height:150;overflow:hidden;margin:0?auto}/**//*width,height隨便定義,為了第一次顯示時能看見loading*/
#bpic{}{display:none}
#loading{}{font:bold?22px/30px?tahoma;color:white;}
#loading?img{}{vertical-align:middle;position:relative}
#loading?.text{}{font:bold?12px/20px?tahoma;color:white;}
.picbox{}{border:1px?green?dashed;overflow:hidden;float:left;width:0;height:0;text-align:left}/**//*注意:overflow:hidden;text-align:left不可更改,如果在IE的表格中定位會出問題*/
.spic{}{position:relative;}/**//*position:relative不可更改*/
.view{}{border:1px?silver?solid;z-index:100;font-size:1px;position:relative;visibility:hidden;display:none}/**//*position:relative;visibility:hidden;display:none不可更改*/
td{}{text-align:center;height:60px;font-size:30px;margin:0?auto}
//-->
</style>
</head>
<body>
Some?text?here<br>ok.|?您需要做的僅僅是加入picshow塊和picbox塊,設置必要參數,剩下的就讓JS去做吧!?(移到小圖上看更多說明)
<table?cellpadding="0"?cellspacing="0"?border="2"?width="100%">
<tr>
????<td>1</td>
????<td>2</td>
????<td>3</td>
</tr>
<tr>
????<td?width="520"?align="center">
<div?id="picshow">
????<img?id="bpic"?onload="loaddone(tempo)"/>
????<div?id="loading">
????????<img?src="http://www.whoj.net/images/loading.gif"?border="0"/>?Loading
????????<div?class="text">Please?wait<br><br><br></div>
????</div>
</div>
????</td>
????<td>
<div?class="picbox"?show="show"><!--設置show顯示默認圖片-->
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b1.jpg"?src="http://www.whoj.net/images/s1.jpg"?onmousemove="move(event,this,0)"?dLeft="700"?dTop="300"?title="設置標簽屬性show='show'顯示默認圖片,設置dLeft,dTop定義默認偏移量"/><!--src:小圖,lowsrc:大圖,showW/showH:可設置預覽窗大小-->
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b2.jpg"?src="http://www.whoj.net/images/s2.jpg"?onmousemove="move(event,this,0)"?showW="200"?showH="200"?title="可自定義預覽圖大小"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b4.jpg"?src="http://www.whoj.net/images/s4.jpg"?width="302"?onmousemove="move(event,this,0)"?title="小圖可以按比例放大"/><!--這里可以重新設置小圖大小,盡量與大圖比例保持一致-->
</div>
????</td>
????<td>In?table
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b3.jpg"?src="http://www.whoj.net/images/s3.jpg"?width="60"?onmousemove="move(event,this,0)"?title="也可以按比例縮小"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b3.jpg"?src="http://www.whoj.net/images/s3.jpg"?onmousemove="move(event,this,0)"?showW="500"?showH="200"?title="可以嵌套在table中"/>
</div>
????</td>
</tr>
</table>
Out?of?table
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b2.jpg"?src="http://www.whoj.net/images/s2.jpg"?onmousemove="move(event,this,0)"?title="放在table外面也沒有問題"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/s4.jpg"?src="http://www.whoj.net/images/s4.jpg"?onmousemove="move(event,this,0)"?showW="1000"?showH="1000"?title="showW='1000'?showH='1000',如果指定預覽圖比原圖大,則使用原圖大小"?/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b5.jpg"?src="http://www.whoj.net/images/s5.jpg"?onmousemove="move(event,this,0)"?showW="160"?showH="320"?title="代碼較上一版本健壯,能在IE,FF下穩定工作,基本支持OP,歡迎大家幫助測試!"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b5.jpg"?src="http://www.whoj.net/images/s5.jpg"?onmousemove="move(event,this,0)"?width="500"?height="112"?title="即使沒有按比例拉伸,也可以正常工作"/>
</div>
</body>
</html>
http://bbs.blueidea.com/thread-2814846-1-1.html
應用效果
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">
<html>
<head>
<title>Javascript?Images?zoom-out?view?sample.?Brought?to?you?by?斬夢人.天天?
QQ:22062019</title>
<script?language="JavaScript">
<!--
var?dshowW=450;?//默認預覽圖寬度(可由小圖的showW,showH動態指定)
var?dshowH=300;?//默認預覽圖高度
var?bborder=1;?//大圖邊框
var?sborder=1;?//小圖邊框
var?vborder=1;?//小預覽圖邊框
var?bigW,bigH,smallW,smallH,showW,showH,viewW,viewH;//大圖,小圖,預覽窗,小預覽窗
var?nview,nflag,picstatus,tempo,abox,zoomX,zoomY;
//初始化
window.onload=function?init(){
????isIE=window.event?1:0;
????picshow.style.borderWidth=bborder;
????picshow.style.width=dshowW;
????picshow.style.height=dshowH;
????bpic.style.display="";
????abox=document.body.getElementsByTagName("div");?//初始化所有小圖
????for?(n=0;n<abox.length;n++)
????????if?(abox[n].className=="picbox"){
????????????var?o=abox[n];
????????????var?view=getview(o);
????????????var?img=getimg(o);
????????????view.style.borderWidth=vborder;
????????????o.style.borderWidth=sborder;
????????????o.style.width=img.width+sborder*2*isIE;
????????????o.style.height=img.height+sborder*2*isIE;
????????????o.setAttribute("pid",n);?//小圖標記,主鍵唯一
????????????if?(o.getAttribute("show")=="show")?loadpic(o);
????????????o.onmouseout=function?(){setTimeout(nview.style.visibility='hidden');}
????????}
}
//載入圖片
function?loadpic(o){?
????var?view=getview(o);
????var?img=getimg(o);
????bpic.style.display="none";
????nview=view;?//標記活動小預覽窗
????nflag=o.getAttribute("pid");?//當前圖片標記,用來判斷切換圖片
????//改變預覽窗大小
????if?(img.getAttribute("showW")!=null)?showW=parseInt(img.getAttribute("showW"));
????else?showW=dshowW;
????if?(img.getAttribute("showH")!=null)?showH=parseInt(img.getAttribute("showH"));
????else?showH=dshowH;
????picshow.style.width=showW+isIE*bborder*2;
????picshow.style.height=showH+isIE*bborder*2;
????loading.style.marginTop=(showH-loading.offsetHeight)/2;
????if?(img.getAttribute("dLeft"))?bpic.style.marginLeft=-parseInt(img.getAttribute("dLeft"));
????if?(img.getAttribute("dTop"))?bpic.style.marginTop=-parseInt(img.getAttribute("dTop"));
????picstatus="loading";
????tempo=o;
????bpic.src=img.lowsrc;
}
//圖片載入完成
function?loaddone(o){
????bpic.style.display="block";
????var?view=getview(o);
????var?img=getimg(o);
????smallW=img.width;?//改變小圖,小預覽窗大小
????smallH=img.height;
????bigW=bpic.width;
????bigH=bpic.height;
????if?(showW>bigW){//如果預覽圖比大圖大,則等于大圖
????????showW=bigW;
????????picshow.style.width=showW+isIE*bborder*2;
????}
????if?(showH>bigH){
????????showH=bigH;
????????picshow.style.height=showH+isIE*bborder*2;
????}
????zoomX=bigW/smallW;
????zoomY=bigH/smallH;
????viewW=showW*smallW/bigW;
????viewH=showH*smallH/bigH;
????nview.style.width=viewW-vborder*2*!isIE;
????nview.style.height=viewH-vborder*2*!isIE;
????nview.style.display="block";?
????img.style.top=-nview.offsetHeight;
????if?(!nview.style.left)?nview.style.left=0;
????if?(!nview.style.top)?nview.style.top=0;
????picstatus="done"
}
//移動事件
function?move(e,o,flag){?//flag,對象來源標記,FF下view的定位需要
????o=isIE?o.parentElement:o.parentNode;
????if?(o.getAttribute("pid")!=nflag){?//判斷是否切換了圖片
????????nview.style.visibility="hidden";?
????????loadpic(o);?//載入新圖片
????}
????if?(picstatus="done"){?//如果大圖載入完畢
????????if?(nview.style.visibility="hidden")?nview.style.visibility="visible";
????????var?e=isIE?window.event:e;
????????if?(isIE==0){?//分別獲取FF或IE的view位置
????????????if?(flag==1){?//由于o的來源不同,使用不同的算法定位
????????????????vX=e.layerX+parseInt(nview.style.left)-nview.offsetWidth/2-vborder;
????????????????vY=e.layerY+parseInt(nview.style.top)-nview.offsetHeight/2-vborder;
????????????}else{
????????????????vX=e.layerX-nview.offsetWidth/2-vborder;
????????????????vY=e.layerY-nview.offsetHeight/2-vborder;
????????????}
????????}
????????else{
????????????vX=e.offsetX-nview.offsetWidth/2;
????????????vY=e.offsetY-nview.offsetHeight/2;
????????}?
????????if?(vX?<?0)?vX?=?0;?//邊界判斷,不能超出縮略圖的范圍
????????if?(vY?<?0)?vY?=?0;
????????if?(vX?>?smallW-viewW)?{vX=smallW-viewW;mX=bigW-showW}else{mX=vX?*?zoomX;}
????????if?(vY?>?smallH-viewH)?{vY=smallH-viewH;mY=bigH-showH}else{mY=vY?*?zoomY;}
????????nview.style.left=vX;
????????nview.style.top=vY;
????????bpic.style.marginLeft?=?-?mX;?//刷新預覽窗口
????????bpic.style.marginTop?=?-?mY;
????}
}
//得到view
function?getview(o){
????var?arr=o.getElementsByTagName("div");
????var?n;
????for?(n=0;n<arr.length;n++)
????????if?(arr[n].className="view")?return?arr[n];
}
//得到img
function?getimg(o){
????var?arr=o.getElementsByTagName("img");
????var?n;
????for?(n=0;n<arr.length;n++)
????????if?(arr[n].className="spic")?return?arr[n];
}
//-->
</script>
<style?type="text/css">
<!--
*{}{padding:0;margin:0}
body{}{color:white;background:black;font:bold?12px/18px?tahoma;color:white;}
#picshow{}{border:1px?red?solid;width:200;height:150;overflow:hidden;margin:0?auto}/**//*width,height隨便定義,為了第一次顯示時能看見loading*/
#bpic{}{display:none}
#loading{}{font:bold?22px/30px?tahoma;color:white;}
#loading?img{}{vertical-align:middle;position:relative}
#loading?.text{}{font:bold?12px/20px?tahoma;color:white;}
.picbox{}{border:1px?green?dashed;overflow:hidden;float:left;width:0;height:0;text-align:left}/**//*注意:overflow:hidden;text-align:left不可更改,如果在IE的表格中定位會出問題*/
.spic{}{position:relative;}/**//*position:relative不可更改*/
.view{}{border:1px?silver?solid;z-index:100;font-size:1px;position:relative;visibility:hidden;display:none}/**//*position:relative;visibility:hidden;display:none不可更改*/
td{}{text-align:center;height:60px;font-size:30px;margin:0?auto}
//-->
</style>
</head>
<body>
Some?text?here<br>ok.|?您需要做的僅僅是加入picshow塊和picbox塊,設置必要參數,剩下的就讓JS去做吧!?(移到小圖上看更多說明)
<table?cellpadding="0"?cellspacing="0"?border="2"?width="100%">
<tr>
????<td>1</td>
????<td>2</td>
????<td>3</td>
</tr>
<tr>
????<td?width="520"?align="center">
<div?id="picshow">
????<img?id="bpic"?onload="loaddone(tempo)"/>
????<div?id="loading">
????????<img?src="http://www.whoj.net/images/loading.gif"?border="0"/>?Loading
????????<div?class="text">Please?wait<br><br><br></div>
????</div>
</div>
????</td>
????<td>
<div?class="picbox"?show="show"><!--設置show顯示默認圖片-->
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b1.jpg"?src="http://www.whoj.net/images/s1.jpg"?onmousemove="move(event,this,0)"?dLeft="700"?dTop="300"?title="設置標簽屬性show='show'顯示默認圖片,設置dLeft,dTop定義默認偏移量"/><!--src:小圖,lowsrc:大圖,showW/showH:可設置預覽窗大小-->
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b2.jpg"?src="http://www.whoj.net/images/s2.jpg"?onmousemove="move(event,this,0)"?showW="200"?showH="200"?title="可自定義預覽圖大小"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b4.jpg"?src="http://www.whoj.net/images/s4.jpg"?width="302"?onmousemove="move(event,this,0)"?title="小圖可以按比例放大"/><!--這里可以重新設置小圖大小,盡量與大圖比例保持一致-->
</div>
????</td>
????<td>In?table
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b3.jpg"?src="http://www.whoj.net/images/s3.jpg"?width="60"?onmousemove="move(event,this,0)"?title="也可以按比例縮小"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b3.jpg"?src="http://www.whoj.net/images/s3.jpg"?onmousemove="move(event,this,0)"?showW="500"?showH="200"?title="可以嵌套在table中"/>
</div>
????</td>
</tr>
</table>
Out?of?table
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b2.jpg"?src="http://www.whoj.net/images/s2.jpg"?onmousemove="move(event,this,0)"?title="放在table外面也沒有問題"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/s4.jpg"?src="http://www.whoj.net/images/s4.jpg"?onmousemove="move(event,this,0)"?showW="1000"?showH="1000"?title="showW='1000'?showH='1000',如果指定預覽圖比原圖大,則使用原圖大小"?/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b5.jpg"?src="http://www.whoj.net/images/s5.jpg"?onmousemove="move(event,this,0)"?showW="160"?showH="320"?title="代碼較上一版本健壯,能在IE,FF下穩定工作,基本支持OP,歡迎大家幫助測試!"/>
</div>
<div?class="picbox">
????<div?class="view"?onmousemove="if?(!isIE)?move(event,this,1)"></div>
????<img?class="spic"?lowsrc="http://www.whoj.net/images/b5.jpg"?src="http://www.whoj.net/images/s5.jpg"?onmousemove="move(event,this,0)"?width="500"?height="112"?title="即使沒有按比例拉伸,也可以正常工作"/>
</div>
</body>
</html>
轉載于:https://www.cnblogs.com/CB/archive/2008/04/15/1154084.html
總結
以上是生活随笔為你收集整理的JS图片放大查看效果!的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 78oa mysql_78oa系统版本升
- 下一篇： vs编译时出现大量ws2def.h的错误