双击鼠标出现放大镜效果

人气：　来源：本站原创　作者：佚名　所属栏目：鼠标类　[切换到繁體中文]

介绍：双击页面出预览窗口及表示预览区域大小的方框，单击关闭。在方框内，同时按下shift和鼠标左键，将增加放大比例。在方框内，同时按下ctrl和鼠标左键，将增加减小比例。

演示：

<!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" />
<title>站长手册_特效演示_双击鼠标出现放大镜效果</title>
<style><!--body,td{font-size: 12px;}--></style>
<script language="JavaScript">
<!--
var zoomvalue=3;
var magnifierw0=100;
var magnifierh0=50;

function init() {
document.body.innerHTML+='<div id="magnifier" style="background-image:url(/texiao/zzsc_demo/spacer.gif);position:absolute; width:100px; height:50px; z-index:100; left: 0px; top: 0px;border:1px solid #FF0000;visibility:hidden;text-align:right;font-size:10px;font-family:Verdana;color:#FF0000;cursor:default;overflow:hidden" onclick="showhide()" onselectstart="return false;">300%</div><div id="zoom" style="background-color:red;position:absolute; width:300px; height:150px; z-index:100; left: 0px; top: 0px;border:1px solid #CCCCCC;visibility:hidden"><iframe name="zoomiframe" src="about:blank" frameborder="0" scrolling="no" width="100%" height="100%"></iframe></div>';
}

function setposition() {
zoom.style.left=document.body.clientWidth+document.body.scrollLeft-5-zoom.offsetWidth;
zoom.style.top=document.body.scrollTop+5;
}

function showhide() {
if (magnifier.style.visibility=='hidden') {
	magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier.offsetWidth/2;
	magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.offsetHeight/2;
	magnifier.style.visibility='visible';
	zoom.style.visibility='visible';
	zoomiframe.location.href=self.location;
	setposition();
	magnifier.setCapture();
	}
else {
	if (event.shiftKey) {
		if (zoomvalue<1) {zoomvalue+=0.1;}
		else {zoomvalue=zoomvalue+1>8?8:zoomvalue+1;}
		magnifier.style.width=3*magnifierw0/zoomvalue;
		magnifier.style.height=3*magnifierh0/zoomvalue;
		magnifier.innerText=parseInt(zoomvalue*100)+'%';
		}
	else if (event.ctrlKey) {
		if (zoomvalue-1>0) zoomvalue-=1;
		else {if (parseInt(zoomvalue*10)/10>0.5) zoomvalue-=0.1;}
		magnifier.style.width=3*magnifierw0/zoomvalue;
		magnifier.style.height=3*magnifierh0/zoomvalue;
		magnifier.innerText=parseInt(zoomvalue*100)+'%';
		}
	else {
		magnifier.style.visibility='hidden';
		zoom.style.visibility='hidden';
		zoom.style.left=0;
		magnifier.releaseCapture();
		}

	}
follow();
}

function follow() {
if (magnifier.style.visibility=='visible') {
	magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier.offsetWidth/2;
	magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.offsetHeight/2;
	zoomiframe.scrollTo(magnifier.offsetLeft,magnifier.offsetTop);
	zoomiframe.document.body.style.zoom=zoomvalue;
	zoomiframe.document.body.style.border='';
	}
}

document.onmousemove=follow;
document.onselectstart=new Function('return false;');
document.ondblclick=showhide;
window.onresize=setposition;
window.onload=init;
// -->
</script>
</head>
<body bgcolor="" >
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<table width=500 border=0 cellspacing=0 cellpadding=0>
<tr>
<td>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

function init() {
document.body.innerHTML+='<div id="magnifier" style="background-image:url(/texiao/zzsc_demo/spacer.gif);position:absolute; width:100px; height:50px; z-index:100; left: 0px; top: 0px;border:1px solid #FF0000;visibility:hidden;text-align:right;font-size:10px;font-family:Verdana;color:#FF0000;cursor:default;overflow:hidden" onclick="showhide()" onselectstart="return false;">300%</div><div id="zoom" style="background-color:red;position:absolute; width:300px; height:150px; z-index:100; left: 0px; top: 0px;border:1px solid #CCCCCC;visibility:hidden"><iframe name="zoomiframe" src="about:blank" frameborder="0" scrolling="no" width="100%" height="100%"></iframe></div>';
}

function setposition() {
zoom.style.left=document.body.clientWidth+document.body.scrollLeft-5-zoom.offsetWidth;
zoom.style.top=document.body.scrollTop+5;
}

}
follow();
}

function follow() {
if (magnifier.style.visibility=='visible') {
magnifier.style.left=document.body.scrollLeft+event.clientX-magnifier.offsetWidth/2;
magnifier.style.top=document.body.scrollTop+event.clientY-magnifier.offsetHeight/2;
zoomiframe.scrollTo(magnifier.offsetLeft,magnifier.offsetTop);
zoomiframe.document.body.style.zoom=zoomvalue;
zoomiframe.document.body.style.border='';
}
}

document.onmousemove=follow;
document.onselectstart=new Function('return false;');
document.ondblclick=showhide;
window.onresize=setposition;
window.onload=init;
// -->
</script>

<table width=500 border=0 cellspacing=0 cellpadding=0>
<tr>
<td>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
<p>双击页面出预览窗口及表示预览区域大小的方框，单击关闭</p>
<p>在方框内，同时按下shift和鼠标左键，将增加放大比例；</p>
<p>在方框内，同时按下ctrl和鼠标左键，将增加减小比例；</p>
<p>你也可以试着将head区里的script单独存成js文件，放到你的页面里看看</p>
<p>不过使用时有一些限制，例如页面表格不能用100%，必须是象素值，而且不能使用居中或者居右对齐方式</p>
</td>
</tr>
</table>