源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js 鼠标移动显示图片的简单实例

  • 时间:2022-05-07 07:08 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js 鼠标移动显示图片的简单实例
一、js代码
[u]复制代码[/u] 代码如下:
//***********默认设置定义.*********************   tPopWait=50;//停留tWait豪秒后显示提示。   tPopShow=5000;//显示tShow豪秒后关闭提示   showPopStep=20;  popOpacity=99;  //***************内部变量定义*****************   sPop=null;  curShow=null;  tFadeOut=null;  tFadeIn=null;  tFadeWaiting=null;  document.write("<mce:style type='text/css'id='defaultPopStyle'><!--  ");  document.write(".cPopText { line-break : normal;word-break : break-all ; background-color: #FEFCF3;color:#000000; border: 1px #E7B68C solid;padding-top: 2px; padding-right: 4px; padding-left: 4px; padding-bottom: 2px;font-size: 12px;width:96px; filter: Alpha(Opacity=0)}");  document.write("  --></mce:style><style type='text/css'id='defaultPopStyle' mce_bogus="1">");  document.write(".cPopText { line-break : normal;word-break : break-all ; background-color: #FEFCF3;color:#000000; border: 1px #E7B68C solid;padding-top: 2px; padding-right: 4px; padding-left: 4px; padding-bottom: 2px;font-size: 12px;width:96px; filter: Alpha(Opacity=0)}");  document.write("</style>");  document.write("<div id='dypopLayer' style="position:absolute;z-index:1000;" mce_style="position:absolute;z-index:1000;" class='cPopText'></div>");    function showPopupText(){  var o=event.srcElement;      MouseX=event.x;      MouseY=event.y;      if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};          if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};      if(o.dypop!=sPop) {              sPop=o.dypop;              clearTimeout(curShow);              clearTimeout(tFadeOut);              clearTimeout(tFadeIn);              clearTimeout(tFadeWaiting);               if(sPop==null || sPop=="") {                  dypopLayer.innerHTML="";                  dypopLayer.style.filter="Alpha()";                  dypopLayer.filters.Alpha.opacity=0;                   }              else {                  if(o.dyclass!=null) popStyle=o.dyclass                       else popStyle="cPopText";                  curShow=setTimeout("showIt()",tPopWait);              }      }  }  function showIt(){          dypopLayer.className=popStyle;          dypopLayer.innerHTML=sPop;          popWidth=dypopLayer.clientWidth;          popHeight=dypopLayer.clientHeight;          if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24              else popLeftAdjust=0;          if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24              else popTopAdjust=0;          dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;          dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;          dypopLayer.style.filter="Alpha(Opacity=0)";          fadeOut();  }  function fadeOut(){      if(dypopLayer.filters.Alpha.opacity<popOpacity) {          dypopLayer.filters.Alpha.opacity+=showPopStep;          tFadeOut=setTimeout("fadeOut()",1);          }          else {              dypopLayer.filters.Alpha.opacity=popOpacity;              tFadeWaiting=setTimeout("fadeIn()",tPopShow);              }  }  function fadeIn(){      if(dypopLayer.filters.Alpha.opacity>0) {          dypopLayer.filters.Alpha.opacity-=1;          tFadeIn=setTimeout("fadeIn()",1);          }  }  document.onmouseover=showPopupText; 
二、html代码包含js代码即可,使用范例 <a href="../UpLoadFile/200911784060017.jpg" target="_blank" title="<img src=../UpLoadFile/200911784060017.jpg  />">大</a> <a href="../UpLoadFile/200911784060018.jpg" target="_blank" title="<img src=../UpLoadFile/200911784060018.jpg width=96 height=70 />">小</a> [img]http://files.jb51.net/file_images/article/201312/20131225094847.png[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部