js 滑鼠滑過顯示大圖代碼提供一款js 滑鼠滑過顯示大圖代碼，像很多的網站都會有滑鼠移上小圖就顯示大圖效果，特別是商城網站使用的特別多，下面我們也來看看吧。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "HTTP://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd">
<html xmlns="HTTP://www.jzread.com/1999/xhtml">
<head>
<title>滑鼠滑過顯示大圖</title>
<meta HTTP-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<div class="latestweb">
<ul>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/20095121750198009074_small.jpg" onmouseo教程ver=" tooltip('<img src=/effect/images/201010090045/20095121750198009074.jpg>')" onmouseout="tooltip()"></ a></div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/2009512172933475478_small.jpg" onmouseover=" tooltip('<img src=/effect/images/201010090045/2009512172933475478.jpg>')" onmouseout="tooltip()"></a ></div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/200957188213477090_small.jpg" onmouseover="tooltip ('<img src=/effect/images/201010090045/200957188213477090.jpg>')" onmouseout="tooltip()"></a>< /div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/2009511102511591969_small.jpg" onmouseover=" tooltip('<img src=/effect/images/201010090045/2009511102511591969.jpg>')" onmouseout="tooltip()"></a ></div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/2009511956153474660_small.jpg" onmouseover=" tooltip('<img src=/effect/images/201010090045/2009511956153474660.jpg>')" onmouseout="tooltip()"></a ></div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/20095121752382849770_small.jpg" onmouseover=" tooltip('<img src=/effect/images/201010090045/20095121752382849770.jpg>')" onmouseout="tooltip()"></ a></div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/200955181403758690_small.jpg" onmouseover="tooltip ('<img src=/effect/images/201010090045/200955181403758690.jpg>')" onmouseout="tooltip()"></a>< /div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/2009551813457815940_small.jpg" onmouseover=" tooltip('<img src=/effect/images/201010090045/2009551813457815940.jpg>')" onmouseout="tooltip()"></a ></div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/200955181308903992_small.jpg" onmouseover="tooltip ('<img src=/effect/images/201010090045/200955181308903992.jpg>')" onmouseout="tooltip()"></a>< /div>
</li>
<li class="">
<div style="width:128px;height:126px;" ><a href="#"><img src="/effect/images/201010090045/200955181403758690_small.jpg" onmouseover="tooltip ('<img src=/effect/images/201010090045/200955181403758690.jpg>')" onmouseout="tooltip()"></a>< /div>
</li>
</ul>
</div>
<script language="網頁特效">
function getviewportheight() {
if (window.innerheight!=window.undefined) return window.innerheight;
if (document.compatmode=='css教程1compat') 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;
}
}
//--初始化變數--
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 tooltips教程tyle="";
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();
<style type="text/css">
*{padding:0;margin:0;}
html{overflow:-moz-scrollbars-vertical;}
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:560px;margin:10px auto 0;}
.latestweb ul{overflow:hidden;_height:1%;}
.latestweb li{float:left;border:1px solid #ebeaea;width:150px;padding:17px 0 14px 22px;margin:14px 18px 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;}
</style>
<script language="javascript">
function tooltip(str) {
}
</script>
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
