鼠标移到图片上变大显示而不是放大镜效果
functiongetViewportHeight(){
if(window.innerHeight!=window.undefined)returnwindow.innerHeight;
if(document.compatMode=='CSS1Compat')returndocument.documentElement.clientHeight;
if(document.body)returndocument.body.clientHeight;
returnwindow.undefined;
}
functiongetViewportWidth(){
if(window.innerWidth!=window.undefined)returnwindow.innerWidth;
if(document.compatMode=='CSS1Compat')returndocument.documentElement.clientWidth;
if(document.body)returndocument.body.clientWidth;
returnwindow.undefined;
}
/**
*Getstherealscrolltop
*/
functiongetScrollTop(){
if(self.pageYOffset)//allexceptExplorer
{
returnself.pageYOffset;
}
elseif(document.documentElement&&document.documentElement.scrollTop)
//Explorer6Strict
{
returndocument.documentElement.scrollTop;
}
elseif(document.body)//allotherExplorers
{
returndocument.body.scrollTop;
}
}
functiongetScrollLeft(){
if(self.pageXOffset)//allexceptExplorer
{
returnself.pageXOffset;
}
elseif(document.documentElement&&document.documentElement.scrollLeft)
//Explorer6Strict
{
returndocument.documentElement.scrollLeft;
}
elseif(document.body)//allotherExplorers
{
returndocument.body.scrollLeft;
}
}
/*
[html]
渐变的弹出图片
使用方法：
将ToolTip.js包含在网页body的结束标签后
调用方法：
[code]
<ahref="pages.jpg"target='_blank'onMouseOver="toolTip('<imgsrc=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')"onMouseOut="toolTip()"><imgsrc='pages_small.jpg'border=0width=30height=20align="absmiddle"title="点击看大图"></a>
必须CSS样式
.trans_msg
{
filter:alpha(opacity=100,enabled=1)revealTrans(duration=.2,transition=1)blendtrans(duration=.2);
}
*/
//--初始化变量--
varrT=true;//允许图像过渡
varbT=true;//允许图像淡入淡出
vartw=150;//提示框宽度
varendaction=false;//结束动画
varns4=document.layers;
varns6=document.getElementById&&!document.all;
varie4=document.all;
offsetX=10;
offsetY=20;
vartoolTipSTYLE="";
functioninitToolTips()
{
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;
elseif(ns6)toolTipSTYLE=document.getElementById("toolTipLayer").style;
elseif(ie4)toolTipSTYLE=document.all.toolTipLayer.style;
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility="visible";
toolTipSTYLE.display="none";
}
document.onmousemove=moveToMouseLoc;
}
}
functiontoolTip(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";
varcontent=
'<tableid="msg1"name="msg1"border="0"cellspacing="0"cellpadding="1"bgcolor="'+fg+'"><td>'+
'<tableborder="1"cellspacing="2"cellpadding="3"bgcolor="'+bg+
'"><td><fontface="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'
//--图象过渡，淡入处理--
varcssopaction=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){}
}
functionmoveToMouseLoc(e)
{
varscrollTop=getScrollTop();
varscrollLeft=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';
returntrue;
}
initToolTips();
主页面:
引入index.css
<linkhref="css/index.css"rel="stylesheet"type="text/css"/>
<bodystyle="text-align:center">
<div>
<ul>
<li>
<divstyle="width:128px;height:126px"><ahref="http://www.lanrentuku.com/"target="_blank"><imgsrc='images/2009511956153474660_small.jpg'onMouseOver="toolTip('<imgsrc=images/2009511956153474660.jpg>')"onMouseOut="toolTip()"></a></div>
</li>
<li>
<divstyle="width:128px;height:126px"><ahref="http://www.lanrentuku.com/"target="_blank"><imgsrc='images/2009551813457815940_small.jpg'onMouseOver="toolTip('<imgsrc=images/2009551813457815940.jpg>')"onMouseOut="toolTip()"></a></div>
</li>
</ul>
</div>
引入ToopTip.js
<scriptlanguage="javascript"src="js/ToolTip.js"></script> </body> </html>
index.css:
/*首页*/
html{overflow:-moz-scrollbars-vertical;}/*AlwaysshowFirefoxscrollbar*/
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;}
aimg,a:hoverimg{border:0;}
.latestWeb{width:980px;margin:10pxauto0;}
.latestWebul{overflow:hidden;_height:1%;}
.latestWebli{float:left;border:1pxsolid#EBEAEA;width:150px;padding:10px;margin:14px14px00;}
.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:010px10px13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
div.bodycontentul{margin-left:0px}