js放大图片的特效
2008-10-05 12:04
381 查看
<script type="text/javascript"><!--
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!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
.className=="picbox"){
var o=abox
;
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
.className="view") return arr
;
}
//得到img
function getimg(o){
var arr=o.getElementsByTagName("img");
var n;
for (n=0;n<arr.length;n++)
if (arr
.className="spic") return arr
;
}
//-->
</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>
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!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
.className=="picbox"){
var o=abox
;
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
.className="view") return arr
;
}
//得到img
function getimg(o){
var arr=o.getElementsByTagName("img");
var n;
for (n=0;n<arr.length;n++)
if (arr
.className="spic") return arr
;
}
//-->
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js鼠标移上去当前放大图片突出显示特效代码
- JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
- 鼠标移上去图片切换且慢慢放大JS特效
- js特效 图片展示放大、说明
- js图片放大特效
- 一个简单的js特效,点击放大图片
- JS实现的防Windows的图片放大特效代码
- js实现图片放大和拖拽特效代码分享
- js图片点击放大特效代码
- js实现图片放大和拖拽特效代码分享
- 移动端点击图片放大特效PhotoSwipe.js插件实现
- 手机端点击图片放大特效PhotoSwipe.js插件实现
- 只有几句的js图片切换特效赏析
- 转：js图片放大缩小
- 各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:
- 超酷动态图片展示墙JS特效制作方法
- js图片特效包
- js实现图片加载特效（从左到右，百叶窗，从中间到两边）
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
- [转贴]CSS+JS实现网页(图片)特效