朋友让我帮他写一个放大镜特效，写好了也给大家分享一下。在 IE6，7，火狐，谷歌 浏览器上测试都通过。////////////////////////////////////////////////////////////////////////////////
<!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">
<html>
<head>
<title>wujinjian</title>
<base href="http://i3.6.cn/cvbnm/34/d2/48/">
<script type="text/javascript"> /*
*特别注意:
*放大的倍数=原图的大小/小图片显示的大小
*自己查看原图片的大小，我这是 400*400 px
*/ //图片对象
var imgObj;
//放大镜div对象
var zoomDivObj;
//显示小图片的div
var mainDivObj;
//放大后显示图片的div
var showDivObj;
//放大镜的大小
var zoomSize=50;
//放大镜的倍数(不能随便填)
var zoomMultiple=2;
//图片的路径
var imgPath="7d0fe1b65e1389c46045cd2d0e43a041.gif";
//小图片显示的大小
var imgW=200;
var imgH=200;
//显示的位置
var left=100;
var top=10;
//放大镜div的透明度(0~100)
var opacity=50;
//放大镜div的颜色
var rgb="223,223,223"; function load()
{
if(zoomDivObj==null)
createZoomDivObj();
if(mainDivObj==null)
createMainDivObj();
if(showDivObj==null)
createShowDivObj();
if(imgObj==null)
createImgObj(); zoomDivObj.style.width=zoomSize+"px";
zoomDivObj.style.height=zoomSize+"px"; showDivObj.style.width=zoomSize*zoomMultiple+"px";
showDivObj.style.height=zoomSize*zoomMultiple+"px"; showDivObj.style.backgroundImage="url("+imgPath+")"; imgObj.src=imgPath;
imgObj.style.width=imgW+"px";
imgObj.style.height=imgH+"px"; mainDivObj.style.width=imgW+"px";
mainDivObj.style.height=imgH+"px";
mainDivObj.style.left=left+"px";
mainDivObj.style.top=top+"px"; showDivObj.style.left=left+imgW+50+"px";
showDivObj.style.top=top+"px"; zoomDivObj.style.backgroundColor="rgb("+rgb+")";
//两个都要写，为了IE 和 火狐 的通用
zoomDivObj.style.filter="alpha(opacity="+opacity+")";
zoomDivObj.style.opacity=opacity/100;
} function showZoomDiv()
{
if(zoomDivObj==null)
createZoomDivObj(); zoomDivObj.style.visibility="visible";
}
function moveZoomDiv(e)
{
if(zoomDivObj==null)
createZoomDivObj(); var w=zoomDivObj.style.width.replace("px","")-0;
var h=zoomDivObj.style.height.replace("px","")-0;
if(mainDivObj==null)
createMainDivObj(); var mouseX=e.clientX-(mainDivObj.style.left.replace("px","")-0);
var mouseY=e.clientY-(mainDivObj.style.top.replace("px","")-0);
window.status=mouseX+" "+mouseY; zoomDivObj.style.left=mouseX-(w/2)+"px";
zoomDivObj.style.top=mouseY-(h/2)+"px"; if(showDivObj==null)
createShowDivObj();
showDivObj.style.backgroundPosition=(-mouseX+w/2)*zoomMultiple+"px "+(-mouseY+h/2)*zoomMultiple+"px";
} function hiddenZoomDiv()
{
if(zoomDivObj==null)
createZoomDivObj(); //zoomDivObj.style.visibility="hidden";
} function createZoomDivObj()
{
zoomDivObj=document.getElementById("zoom_div_id");
} function createMainDivObj()
{
mainDivObj=document.getElementById("main_div_id");
} function createShowDivObj()
{
showDivObj=document.getElementById("show_div_id");
} function createImgObj()
{
imgObj=document.getElementById("img_id");
}
</script>
</head>
<body onmousemove="moveZoomDiv(event)" onload="load()">
<div id="main_div_id" style="position:absolute;overflow:hidden;background-color:cyan;border:gray solid 1px;" onmouseover="showZoomDiv()" onmouseout="hiddenZoomDiv()" >
<img id="img_id"> <div id="zoom_div_id" style="position:absolute;left:0px;top:0px;overflow:hidden;visibility:hidden;"></div>
</div> <div id="show_div_id" style="position:absolute;overflow:hidden;background-color:cyan;background-repeat:no-repeat;border:gray solid 1px;" ></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">
<html>
<head>
<title>wujinjian</title>
<base href="http://i3.6.cn/cvbnm/34/d2/48/">
<script type="text/javascript"> /*
*特别注意:
*放大的倍数=原图的大小/小图片显示的大小
*自己查看原图片的大小，我这是 400*400 px
*/ //图片对象
var imgObj;
//放大镜div对象
var zoomDivObj;
//显示小图片的div
var mainDivObj;
//放大后显示图片的div
var showDivObj;
//放大镜的大小
var zoomSize=50;
//放大镜的倍数(不能随便填)
var zoomMultiple=2;
//图片的路径
var imgPath="7d0fe1b65e1389c46045cd2d0e43a041.gif";
//小图片显示的大小
var imgW=200;
var imgH=200;
//显示的位置
var left=100;
var top=10;
//放大镜div的透明度(0~100)
var opacity=50;
//放大镜div的颜色
var rgb="223,223,223"; function load()
{
if(zoomDivObj==null)
createZoomDivObj();
if(mainDivObj==null)
createMainDivObj();
if(showDivObj==null)
createShowDivObj();
if(imgObj==null)
createImgObj(); zoomDivObj.style.width=zoomSize+"px";
zoomDivObj.style.height=zoomSize+"px"; showDivObj.style.width=zoomSize*zoomMultiple+"px";
showDivObj.style.height=zoomSize*zoomMultiple+"px"; showDivObj.style.backgroundImage="url("+imgPath+")"; imgObj.src=imgPath;
imgObj.style.width=imgW+"px";
imgObj.style.height=imgH+"px"; mainDivObj.style.width=imgW+"px";
mainDivObj.style.height=imgH+"px";
mainDivObj.style.left=left+"px";
mainDivObj.style.top=top+"px"; showDivObj.style.left=left+imgW+50+"px";
showDivObj.style.top=top+"px"; zoomDivObj.style.backgroundColor="rgb("+rgb+")";
//两个都要写，为了IE 和 火狐 的通用
zoomDivObj.style.filter="alpha(opacity="+opacity+")";
zoomDivObj.style.opacity=opacity/100;
} function showZoomDiv()
{
if(zoomDivObj==null)
createZoomDivObj(); zoomDivObj.style.visibility="visible";
}
function moveZoomDiv(e)
{
if(zoomDivObj==null)
createZoomDivObj(); var w=zoomDivObj.style.width.replace("px","")-0;
var h=zoomDivObj.style.height.replace("px","")-0;
if(mainDivObj==null)
createMainDivObj(); var mouseX=e.clientX-(mainDivObj.style.left.replace("px","")-0);
var mouseY=e.clientY-(mainDivObj.style.top.replace("px","")-0);
window.status=mouseX+" "+mouseY; zoomDivObj.style.left=mouseX-(w/2)+"px";
zoomDivObj.style.top=mouseY-(h/2)+"px"; if(showDivObj==null)
createShowDivObj();
showDivObj.style.backgroundPosition=(-mouseX+w/2)*zoomMultiple+"px "+(-mouseY+h/2)*zoomMultiple+"px";
} function hiddenZoomDiv()
{
if(zoomDivObj==null)
createZoomDivObj(); //zoomDivObj.style.visibility="hidden";
} function createZoomDivObj()
{
zoomDivObj=document.getElementById("zoom_div_id");
} function createMainDivObj()
{
mainDivObj=document.getElementById("main_div_id");
} function createShowDivObj()
{
showDivObj=document.getElementById("show_div_id");
} function createImgObj()
{
imgObj=document.getElementById("img_id");
}
</script>
</head>
<body onmousemove="moveZoomDiv(event)" onload="load()">
<div id="main_div_id" style="position:absolute;overflow:hidden;background-color:cyan;border:gray solid 1px;" onmouseover="showZoomDiv()" onmouseout="hiddenZoomDiv()" >
<img id="img_id"> <div id="zoom_div_id" style="position:absolute;left:0px;top:0px;overflow:hidden;visibility:hidden;"></div>
</div> <div id="show_div_id" style="position:absolute;overflow:hidden;background-color:cyan;background-repeat:no-repeat;border:gray solid 1px;" ></div>
</body>
</html>
解决方案 »
- jqueryeasyui combobox提交方式更改
- jquery $.post 请求 URL 绝对路径 出错
- 请教碁础概念，history对象的length属性，表示最近访问过的页面个数，"最近访问过"是一个什么概念，如何界定？
- encodeURL加密
- 菜鸟请教初级问题！举手之劳，谢谢帮忙
- js获取php动态生成的id
- 我在一个网站上看到一个投票系统，投完票后就能出现一个柱状图动态现实当前票数，请问如何实现呢？
- 关于fso的js问题---急!!!在线
- .attr("value")取不到值，求助
- 帮忙看下这段代码
- 请教一个js的问题啊
- jquery如何获取当前文本框的value值！急切盼望答案
从没用过 jquery
自己敲js 爽
可是 我自己换了张图片进出 把url 和路径都改了试下 大图是显示出来了 但是鼠标放在上面的时候 旁边放大的图片没有什么效果 我用的是ie的浏览器 请问这是什么问题
我从来不用jquery 不喜欢 jquery
请问lz换图片是不是换这两个地方的<base href="http://i3.6.cn/cvbnm/34/d2/48/"> url var imgPath="7d0fe1b65e1389c46045cd2d0e43a041.gif"; 图片的名称还需要换哪里麽？
把base 标记直接去掉就好了
不能说干嘛要坐飞机啊，我骑马也挺舒服的，但是，在不给自己带来任何坏处的前提下，有更好的工具为什么不用呢，同意不？！另外，同学，这个JS不太好用啊，换了不同SIZE的图片，参数还要自己调啊。