鼠标移到图片上变大显示而不是放大镜效果
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}