js鼠标移动显示图片的简单实例
2023-06-13 09:15:14 时间
一、js代码
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=5000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=99;
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<mce:styletype="text/css"id="defaultPopStyle"><!--
");
document.write(".cPopText{line-break:normal;word-break:break-all;background-color:#FEFCF3;color:#000000;border:1px#E7B68Csolid;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><styletype="text/css"id="defaultPopStyle"mce_bogus="1">");
document.write(".cPopText{line-break:normal;word-break:break-all;background-color:#FEFCF3;color:#000000;border:1px#E7B68Csolid;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("<divid="dypopLayer"style="position:absolute;z-index:1000;"mce_style="position:absolute;z-index:1000;"class="cPopText"></div>");
functionshowPopupText(){
varo=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
elsepopStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
functionshowIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth)popLeftAdjust=-popWidth-24
elsepopLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight)popTopAdjust=-popHeight-24
elsepopTopAdjust=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();
}
functionfadeOut(){
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);
}
}
functionfadeIn(){
if(dypopLayer.filters.Alpha.opacity>0){
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
二、html代码包含js代码即可,使用范例
相关文章
- Js的长轮询[通俗易懂]
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- 【JS 逆向百例】猿人学系列 web 比赛第五题:js 混淆 - 乱码增强,详细剖析
- 用JS实现实时显示系统时间详解编程语言
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- 从前端JS里请求Redis资源,搭建高性能应用(前端js请求redis)
- JS的数组的扩展实例代码
- js实例入门(简单展开或关闭)
- JS实现简单的Canvas画图实例
- JS定时器实例详细分析
- js获取客户端外网ip的简单实例
- JS取文本框中最小值的简单实例
- 页面实时更新时间的JS实例代码
- JS对象转换为Jquery对象示例
- js模拟hashtable的简单实例
- JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
- 在Node.js中实现文件复制的方法和实例
- 使用Node.js实现一个简单的FastCGI服务器实例
- JS简单操作select和dropdownlist实例
- js中this的用法实例分析
- js制作简易年历完整实例