<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> </head> <mce:script type="text/javascript"><!-- // JScript 文件 //注意：使用此脚本必须要设置好图片的宽度和高度否则会出错。 var OriginImage=new Image(); //使用图片对象，得到图片原始宽度 function GetImageWidth(oImage) { if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src; return OriginImage.width; } //使用图片对象，得到图片原始高度 function GetImageHeight(oImage) { if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src; return OriginImage.height; } var mytime=null; //递加 function jia() { var i=0;//变量用于控制延时器只运行一个 var myimg=document.getElementById("intmyimg"); if(parseInt(myimg.width)< GetImageWidth(myimg)) { i=1; myimg.width=parseInt(myimg.width)+10;//递加图片宽度 myimg.style.left=parseInt(myimg.style.left)-5+"px";//移动图片位置（移动位置为递加宽度的一半） if(i==1) { mytime=setTimeout(jia,0); } } if(parseInt(myimg.height)< GetImageHeight(myimg)) { myimg.height=parseInt(myimg.height)+10; myimg.style.top=parseInt(myimg.style.top)-5+"px"; if(i==0) { mytime=setTimeout(jia,0); } } } //递减 function jian() { var i=0;//变量用于控制延时器只运行一个 var s=0;//变量用于控制释放对象 clearTimeout(mytime);//必须清空增加延时器否则会造成死循环 var myimg=document.getElementById("intmyimg"); if(parseInt(myimg.width)> _width) { i=1; s=1; myimg.width=parseInt(myimg.width)-10;//递减图片宽度 myimg.style.left=parseInt(myimg.style.left)+5+"px";//移动图片位置（移动位置为递减宽度的一半） if(i==1) { setTimeout(jian,0); } } if(parseInt(myimg.height)> _heigth) { s=1; myimg.height=parseInt(myimg.height)-10; myimg.style.top=parseInt(myimg.style.top)+5+"px"; if(i==0) { setTimeout(jian,0); } } if(s==0){//等待 高，宽全部递减完 释放对象 window.document.body.removeChild(myimg); } } var _width=null; var _heigth=null; function bigimg(obj,id) { var myid=document.getElementById("intmyimg"); if(myid==null)//判断是否存在intmyimg对象 { var mX=obj.offsetTop; var mY=obj.offsetLeft; objs=obj; //得到图片绝对位置 while(obj=obj.offsetParent) { mX+=obj.offsetTop; mY+=obj.offsetLeft; } _width =objs.width; _heigth=objs.height; var mydiv=document.createElement("img"); mydiv.setAttribute("id","intmyimg"); mydiv.setAttribute("src",objs.src); mydiv.setAttribute("width",objs.width); mydiv.setAttribute("height",objs.height); mydiv.setAttribute("onmouseout","jian()"); mydiv.setAttribute("onclick","bigonclick("+id+")"); if(window.ActiveXObject) { mydiv.attachEvent('onmouseout',jian); mydiv.attachEvent('onclick',new Function('bigonclick('+id+')')); //mydiv.οnclick=jian; } mydiv.style.cssText="left:"+mY+"px;top:"+mX+"px;z-index:2;position:absolute;cursor:pointer;"; window.document.body.appendChild(mydiv); jia(); } } function bigonclick(id) { window.location="xxxx?pid="+id; } // --></mce:script> <body> <img id="myimage" src="http://www.baidu.com/img/baidu_logo.gif" mce_src="http://www.baidu.com/img/baidu_logo.gif" width="100" height="100" onClick="bigimg(this,1)" style="position:absolute; left: 358px; top: 232px; cursor:pointer;"> </body> </html>
javascript实现图片放大与缩小
最新推荐文章于 2022-12-20 17:30:40 发布
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
