ppg放大镜效果图形特效__脚本特效_后台技术下载演示大图小图特效飞飞Asp技术乐园

ppg放大镜效果

时间： 2008-04-29 22:15:33　阅读次数：2878

<!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=utf-8" />
<meta name="keywords" content="衬衫,直销,衬衣,HANY" />
<link rel="shortcut icon" href="/favicon.ico">
<title>White Collar 80S长袖 - HANY - 快乐，随身出发</title>
<script>

//大图浏览器
var gp_cur = 1;
var gid = 0;

var zoom_m = 320;    // 小图的实际尺寸的宽和高
var zoom_w = 280;   //大放大镜的显示框的宽和高
var zoom_x = 90;   //小放大镜的宽和高
var zoom_b = 996; //实际大图的宽和高

var zoom_x_h = zoom_x / 2;

var mp_pos = null;

function locateZoom()
{
	var zw = object("bpd");//大框
	if (zw == null)
	{
		return;
	}

zw.style.left = mp_pos.x + zoom_m + 14  + "px";
	zw.style.top = mp_pos.y + 20  + "px";
}

function slidebp()
{
	var x = event.clientX 
		- mp_pos.x 
		+ document.documentElement.scrollLeft;
	var y = event.clientY 
		- mp_pos.y 
		+ document.documentElement.scrollTop;

movebigpic(x, y);
	movediv(x, y);

var mp = object("mp");
	var bpd = object("bpd");
	var vpd = object("vpd");

if (mp == null || bpd == null || vpd == null)
	{
		return;
	}
	mp.style.filter = "alpha(opacity=50)";
	bpd.style.display = "";
	vpd.style.display = "";
}

function closebp()
{
	var mp = object("mp");
	var bpd = object("bpd");
	var vpd = object("vpd");

if (mp == null || bpd == null || vpd == null)
	{
		return;
	}

mp.style.filter = "";

bpd.style.display = "none";
	vpd.style.display = "none";
  }

if (y < zoom_x_h)
  {
    yy = 0;
  }
  else if (y > (zoom_m - zoom_x_h))
  {
    yy = zoom_w - zoom_b;
  }
  else
  {
    yy = (zoom_x_h - y) * (zoom_b - zoom_w) / (zoom_m - zoom_x);
  }
  bpd.style.left = xx + "px";
  bpd.style.top = yy + "px";
}

function movediv(x, y)
{
  var vpd = object("vpd");
  if (vpd == null)
  {
    return;
  }

vpd.style.left = (xx + mp_pos.x) + "px";
  vpd.style.top = (yy + mp_pos.y) + "px";
  movesmallpic(xx, yy);
}

function movesmallpic(x, y)
{
  var vp = object("vpd2");
  if (vp == null)
  {
    return;
  }

var xx = 0 - x;
  var yy = 0 - y;

vp.style.left = xx + "px";
  vp.style.top = yy + "px";

}

function object(objId){
	//return objId;
	return document.getElementById(objId);
}

</script>
<style type="text/css">
.imglist_right  {width:320px; height:352px;}
.imglist_right img {border:1px solid #D0D3DE; width:320px; height:320px;}
</style>
</head>
<body>

<div class="imglist_right" id="mpd">
  <img src="/imagesjs/s.jpg" name="mp" border="0" id="mp" style="cursor:pointer" onmousemove="javascript:slidebp();" onmouseout="javascript:closebp();" />
  </div>
<div id="bpd" style="position:absolute; display:none; width:280px; height:280px; border:1px solid #CCCCCC; overflow:hidden"> 
<div id="bpd2" style="position:absolute;">
<iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:5px; left:2px;width:1000px;height:1000px;"></iframe>
<img src="/imagesjs/big.jpg" id="bp">
</div>
</div>
<div id="vpd" style="position:absolute; display:none; width:90px; height:90px; border:1px solid #444444; overflow:hidden">
<div id="vpd2" style="position:absolute;">
<img src="/imagesjs/s.jpg" name="mp" border="0" id="mp" style="cursor:pointer" onmousemove="javascript:slidebp();" onmouseout="javascript:closebp();" />
</div></div>
<script language="javascript">
gid = 17;
mp_pos = getAbsPoint(object("mpd"));
locateZoom();
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

本站下载资源全部放在fs2you共享空间上，若不能正常下载以上资源，请下载修复补丁