鼠标碰到图片，图片变大

最新推荐文章于 2023-03-13 14:26:40 发布

weixin_30795127

最新推荐文章于 2023-03-13 14:26:40 发布

阅读量223

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wispzone/archive/2009/09/19/1570220.html

版权

Code    <script language="javascript">
<HTML>
<HEAD>
<script>
  var orig_height = 600;//大图
  var orig_width = 800;//大图
  var newWidth = 60;//小图
  var newHeight = 80;//小图

function PicLoad()
{
  // first do the big image
  if (!document.photo_single) // in case a resize happens before the photo element exists
  return;

  // pick the smaller ratio
  var ratio = 1;
  var alt = "点击看原图 ";
  ratio = newWidth / orig_width;
  if (newHeight / orig_height < ratio)
    ratio = newHeight / orig_height;
  document.getElementById("mainPhoto").title=alt;
  document.photo_single.width = orig_width * ratio;
  document.photo_single.height= orig_height * ratio;

}

function OnPhotoClick()
{
document.getElementById("resizeCheck").checked = !document.getElementById("resizeCheck").checked;
ToggleResizeCheck();
}

function SetPhotoSize()
{
  // first do the big image
  if (!document.photo_single) // in case a resize happens before the photo element exists
  return;

  // pick the smaller ratio
  var ratio = 1;
  var alt = "点击看原图 ";
  if (document.getElementById("resizeCheck").checked)
  {    alt = "点击看原图 ";
    ratio = newWidth / orig_width;
    if (newHeight / orig_height < ratio)
        ratio = newHeight / orig_height;
  }else
  {
    alt = "自动适应大小";
  }
  document.getElementById("mainPhoto").title=alt;
  document.photo_single.width = orig_width * ratio;
  document.photo_single.height= orig_height * ratio;
}
function ToggleResizeCheck()
{
var checked = "false";
if (document.getElementById("resizeCheck").checked)
{
  checked = "true";
}
// update the image
SetPhotoSize();
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF"  onmouseup="document.selection.empty()" oncontextmenu="return false" onmousemove="document.selection.empty()">

<a href="#">
<IMG
alt="点击看原图" border="0" id="mainPhoto" onload= "orig_height=this.height;orig_width=this.width;PicLoad();return false;"
SRC="http://www.16277.com/caitu/uploadfile/2007/3/8/9221262528021217.jpg"  onerror="loadagin();return false;" name="photo_single" onclick="OnPhotoClick();"></a>

<script>
function loadagin()
{    this.location.href='';
    return false;
}
</script>

【<input type="checkbox" id="resizeCheck"  onclick="ToggleResizeCheck();" checked>自适应大小】
【<A href="javascript:window.close();">关闭窗口</A>】
</BODY>
</HTML

Solutiton 2:

function chg(src)
    {
        document.getElementById( " img2 " ).src = src;
        alert(document.getElementById( " img2 " ).src);
    }
     </ script >

    < form id = " form1 " runat = " server " >
         < img id = " img1 " src = " 111.jpg " onmouseover = " chg(this.src) " />
         < img id = " img2 " src = " 222.jpg " style = " width: 138px; height: 81px " />
     </ form >

转载于:https://www.cnblogs.com/wispzone/archive/2009/09/19/1570220.html

weixin_30795127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标碰到图片，图片变大

Code<scriptlanguage="javascript"><HTML><HEAD><script>varorig_height=600;//大图varorig_width=800;//大图varnewWidth=60;//小图varnewHeight=80;//小图...
复制链接

扫一扫