登录 注册

登录

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

更多
2009年10月19日 20:20 #1 作者: 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>
代码二,没有放大效果,但是可以控制图片的位置。
因为joomla的模块位置是固定的,这样放大的图片,只能在模块的位置显示。
如果能将图片悬浮在整个网页上,那就能完美显示细节大图了。
谁能将两段代码合并一下。万分感谢。

登录 或者   注册一个会员帐号 来参与讨论

更多
2009年10月21日 12:44 #2 作者: lhping
是放大镜吧 ?

joomla,zen-cart,shopex,ecshop 模板原创设计,QQ:372982800,
文件附件:

登录 或者   注册一个会员帐号 来参与讨论

更多
2009年10月21日 13:13 #3 作者: kokomi
不是放大镜
当鼠标经过的时候在这个缩略图周围悬浮一张大图,(缩略图<放大图<=原始图>),随着鼠标的移动,放大图也显示不同细节。

并且悬浮的大图,要悬浮于整个网页的最外层,不要被别的模块给遮挡。同时自动判断浏览器边框,以便显示在不同方位。

登录 或者   注册一个会员帐号 来参与讨论