问题鼠标经过图片自动发大的代码怎么写？

开始
上一页
1
下一页
末尾

kokomi
话题作者
离线
COM_KUNENA_SAMPLEDATA_RANK1

2009年10月19日 20:20 #1 作者： kokomi

kokomi 创建了话题： 鼠标经过图片自动发大的代码怎么写？

看到好多商品展示能鼠标经过可以展示商品细节。找了好久没找到这样的模块。
在网上搜到两段代码，但是效果不好。要是能将这两段代码融合一下就完美了。
代码一

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 
</head>
 
<script language="JavaScript">
 
<!--
 
var srcX = 2592; //原图大小,可以任意设置
 
var srcY = 1944;
 
var bigX = 500; //预览窗大小,可以任意设置
 
var bigY = 375;
 
var smallX = 500; //缩略图宽度
 
var smallY = srcY * smallX / srcX;
 
var viewX = bigX / srcX * smallX; //预览范围
 
var viewY = bigY / srcY * smallY;
 
var bl = srcX / smallX;//缩小比例
 
var border = 1; //边框
 
window.onload=function (){
 
//head.innerHTML="图片载入";
 
smallpic.width=smallX;
 
smallpic.height=smallY;
 
bigpic.width=srcX;
 
bigpic.height=srcY;
 
view.style.width=viewX;
 
view.style.height=viewY;
 
smallbox.style.borderWidth=border;
 
bigbox.style.borderWidth=border;
 
if (window.event){
 
smallbox.style.width=smallpic.offsetWidth border*2;
 
smallbox.style.height=smallpic.offsetHeight border*2;
 
bigbox.style.width=bigX border*2;
 
bigbox.style.height=bigY border*2;
 
}else{
 
smallbox.style.width=smallpic.offsetWidth;
 
smallbox.style.height=smallpic.offsetHeight;
 
bigbox.style.width=bigX;
 
bigbox.style.height=bigY;
 
}
 
move(event);
 
}
 
function move(e){
 
var e = window.event?window.event:e;
 
var iebug = 0;
 
if (window.event){
 
var vX = e.offsetX - viewX/2;
 
var vY = e.offsetY - viewY/2;
 
}else{
 
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
 
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
 
iebug = 2;
 
}
 
if (vX  < 0) vX = 0;
 
if (vY  < 0) vY = 0;
 
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
 
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
 
bigpico.style.marginLeft = - vX * bl 
 
bigpico.style.marginTop = - vY * bl 
 
view.style.left = vX   smallbox.offsetLeft   border;
 
view.style.top = vY   smallbox.offsetTop   border;
 
}
 
function aa(){
 
document.getElementById('bigbox').style.display="none";
 
document.getElementById('view').style.border="none";
 
}
 
function bb(){
 
 document.getElementById('bigbox').style.display="block";
 
 document.getElementById('view').style.border="1px solid #FF9900";
 
 //document.getElementById('view').style.background="#009999";
 
// document.getElementById('view').style.filter="alpha(opacity=40)";
 
}
 
//-->
 
</script>
 
<style type="text/css">
 
<!--
 
*{padding:0;margin:0;}
 
img{display:block;}
 
#smallbox{border:1px #EBEBEB solid;overflow:hidden; width:350px; position:relative;}
 
#bigbox{border:1px #EBEBEB solid;overflow:hidden; position:absolute; left:500px; top:0px; display:none}
 
#view{position:absolute;}
 
//-->
 
</style>
 
<body>
 
<div id="smallbox"  onMouseOver="bb()" onMouseOut="aa()"> <img src="12.jpg" name="smallpic" border="0" id="smallpic" onMouseMove="move(event)">
<div id="view" onMouseMove="move(event)" onMouseOver="bb()" onMouseOut="aa()" > </div>
 
</div>鼠标放在上面可以观看大图
 
<div id="bigbox"> <div id="bigpico"> <img src="tech.jpg" name="bigpic"border="0" id="bigpic"> </div>
 
</div>
 
</body>
 
</html>

代码一有很大的缺点是，显示在旁边固定死了。
代码二

<!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=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
	img {border:0;width:200px;height:200px;}
	#imgbox {position:absolute;border:3px solid #999;filter: Alpha(Opacity=85);visibility:hidden;}
</style>
<script language="javascript" type="text/javascript">
/*触发事件*/
function mouse_0(obj){
	var imgbox=document.getElementById("imgbox");
	imgbox.style.visibility='visible';
	var img = document.createElement("img");
	img.src=obj.src;
	img.style.width=obj.width * 2;
	img.style.height=obj.height * 2;
	imgbox.innerHTML='';
	imgbox.appendChild(img);
}
/*移动事件*/
function mouse_1(obj,e){
	var browerHeight=document.documentElement.clientHeight; //浏览器高度
	var browerWidth=document.documentElement.clientWidth; //浏览器宽度
	var mouseY=e.clientY; //当前光标Y位置
	var mouseX=e.clientX; //当前光标X位置
	var scrollTop=document.documentElement.scrollTop; //垂直滚动条距离顶部
	var scrollLeft=document.documentElement.scrollLeft //水平滚动条距离左边
	if (mouseY obj.height * 2   20 <= browerHeight) var height = true; //当前光标Y位置   对象高度 <= 浏览器高度 ，则height为真
	if (browerWidth-mouseX > mouseX) var width = true; //光标距离右边如果大于左边 ，则width为真
	if(height)
		y=scrollTop mouseY 20;
	else
		y=scrollTop   browerHeight-obj.height * 2 - 20;
	if(width)
		x=scrollLeft mouseX 20;
	else
		x=scrollLeft mouseX-obj.width * 2 -20;
	document.getElementById("imgbox").style.left=x   "px";
	document.getElementById("imgbox").style.top=y   "px";
}
/*离开事件*/
function mouse_2(){
	document.getElementById("imgbox").style.visibility='hidden';
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<img src="12.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
<img src="tech.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
<img src="http://www.zzsky.cn/effect/images/huandeng3.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
<img src="http://www.zzsky.cn/effect/images/huandeng4.jpg" onmouseover="mouse_0(this)" onmousemove="mouse_1(this,event)" onmouseout="mouse_2(this)">
<div id="imgbox" onmouseover="mouse_2(this)"></div>
</body>
</html>