鼠标移上去显示大图的代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是鼠标移上去显示大图的代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为鼠标移上去显示大图的代码，属于站长常用代码" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>鼠标移上去显示大图的代码</title>
</head>
<body style="text-align:center">
<div class="latestWeb">
<ul>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/20095121750198009074_small.jpg' onMouseOver="toolTip('<img src=images/20095121750198009074.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/2009512172933475478_small.jpg' onMouseOver="toolTip('<img src=images/2009512172933475478.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/200957188213477090_small.jpg' onMouseOver="toolTip('<img src=images/200957188213477090.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/2009511102511591969_small.jpg' onMouseOver="toolTip('<img src=images/2009511102511591969.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/2009511956153474660_small.jpg' onMouseOver="toolTip('<img src=images/2009511956153474660.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/20095121752382849770_small.jpg' onMouseOver="toolTip('<img src=images/20095121752382849770.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/200955181403758690_small.jpg' onMouseOver="toolTip('<img src=images/200955181403758690.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/2009551813457815940_small.jpg' onMouseOver="toolTip('<img src=images/2009551813457815940.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/200955181308903992_small.jpg' onMouseOver="toolTip('<img src=images/200955181308903992.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
<li class="">
<div style="width:128px; height:126px"><a href="#" ><img src='images/200955181403758690_small.jpg' onMouseOver="toolTip('<img src=images/200955181403758690.jpg>')" onMouseOut="toolTip()"></a></div>
</li>
</ul>
</div>
<script language="javascript" src="js/ToolTip.js"></script>
</body>
</html>

JS代码(ToolTip.js):

function getViewportHeight(){
	if (window.innerHeight!=window.undefined) return window.innerHeight;
	if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
	if (document.body) return document.body.clientHeight;
	return window.undefined;
}
function getViewportWidth(){
	if (window.innerWidth!=window.undefined) return window.innerWidth;
	if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;
	if (document.body) return document.body.clientWidth;
	return window.undefined;
}
/** * Gets the real scroll top */
function getScrollTop(){
	if (self.pageYOffset) // all except Explorer{
	return self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)// Explorer 6 Strict{
	return document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers{
	return document.body.scrollTop;
}
}
function getScrollLeft(){
	if (self.pageXOffset) // all except Explorer{
	return self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollLeft)// Explorer 6 Strict{
	return document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers{
	return document.body.scrollLeft;
}
}
/*渐变的弹出图片使用方法：将ToolTip.js包含在网页body的结束标签后调用方法：<a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看大图"></a>必须CSS样式.trans_msg{
	filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
}
*/
//--初始化变量--var rT=true;
	//允许图像过渡var bT=true;
	//允许图像淡入淡出var tw=150;
	//提示框宽度var endaction=false;
	//结束动画var ns4 = document.layers;
	var ns6 = document.getElementById && !document.all;
	var ie4 = document.all;
	offsetX = 10;
	offsetY = 20;
	var toolTipSTYLE="";
	function initToolTips(){
	tempDiv = document.createElement("div");
	tempDiv.id = "toolTipLayer";
	tempDiv.style.position = "absolute";
	tempDiv.style.display = "none";
	document.body.appendChild(tempDiv);
	if(ns4||ns6||ie4){
	if(ns4) toolTipSTYLE = document.toolTipLayer;
	else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
	else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
	if(ns4) document.captureEvents(Event.MOUSEMOVE);
	else{
	toolTipSTYLE.visibility = "visible";
	toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg,fg,bg){
	try{
	if(toolTip.arguments.length < 1) // hide{
	if(ns4){
	toolTipSTYLE.visibility = "hidden";
}
else{
	//--图象过渡，淡出处理-- if (!endaction){
	toolTipSTYLE.display = "none";
}
if (rT) document.all("msg1").filters[1].Apply();
	if (bT) document.all("msg1").filters[2].Apply();
	document.all("msg1").filters[0].opacity=0;
	if (rT) document.all("msg1").filters[1].Play();
	if (bT) document.all("msg1").filters[2].Play();
	if (rT){
	if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
	toolTipSTYLE.display = "none";
}
}
if (bT){
	if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
	toolTipSTYLE.display = "none";
}
}
if (!rT && !bT) toolTipSTYLE.display = "none";
	//----------------------}
}
else // show{
	if(!fg) fg = "#777777";
	if(!bg) bg = "#eeeeee";
	var content ='<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +'<table border="1" cellspacing="2" cellpadding="3" bgcolor="' + bg +'"><td><font face="Arial" color="' + fg +'" size="-2">' + msg +'</font></td></table></td></table>';
	if(ns4){
	toolTipSTYLE.document.write(content);
	toolTipSTYLE.document.close();
	toolTipSTYLE.visibility = "visible";
}
if(ns6){
	document.getElementById("toolTipLayer").innerHTML = content;
	toolTipSTYLE.display='block'}
if(ie4){
	document.all("toolTipLayer").innerHTML=content;
	toolTipSTYLE.display='block' //--图象过渡，淡入处理-- var cssopaction=document.all("msg1").filters[0].opacity document.all("msg1").filters[0].opacity=0;
	if (rT) document.all("msg1").filters[1].Apply();
	if (bT) document.all("msg1").filters[2].Apply();
	document.all("msg1").filters[0].opacity=cssopaction;
	if (rT) document.all("msg1").filters[1].Play();
	if (bT) document.all("msg1").filters[2].Play();
	//----------------------}
}
}
catch(e){
}
}
function moveToMouseLoc(e){
	var scrollTop = getScrollTop();
	var scrollLeft = getScrollLeft();
	if(ns4||ns6){
	x = e.pageX + scrollLeft;
	y = e.pageY - scrollTop;
}
else{
	x = event.clientX + scrollLeft;
	y = event.clientY;
}
if (x-scrollLeft > getViewportWidth() / 2){
	x = x - document.getElementById("toolTipLayer").offsetWidth - 2 * offsetX;
}
if ((y+document.getElementById("toolTipLayer").offsetHeight+offsetY)>getViewportHeight()){
	y = getViewportHeight()-document.getElementById("toolTipLayer").offsetHeight-offsetY;
}
toolTipSTYLE.left = (x + offsetX)+'px';
	toolTipSTYLE.top = (y + offsetY + scrollTop)+'px';
	return true;
}
initToolTips();

CSS代码(index.css):

/*首页*/
html{overflow:-moz-scrollbars-vertical;}
/*Always show Firefox scrollbar*/
body{font:12px/22px "宋体";word-break:break-all;text-align:left;background:#C0C0C0;color:#4E4E4E;}
ul,li{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover{color:#ff722d;text-decoration:none;}
img{border:0;}
a img,a:hover img{border:0;}
.latestWeb{width:980px;margin:10px auto 0;}
.latestWeb ul{overflow:hidden;_height:1%;}
.latestWeb li{float:left;border:1px solid #EBEAEA;width:150px;padding:10px;margin:14px 14px 0 0;}
.trans_msg{filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);}
div.bodycontent{font-family:Arial,Helvetica,sans-serif;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
div.bodycontent ul{margin-left:0px}

附件:下载该文件资源,减少时间成本(增值服务)