当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js鼠标移动在title中显示图片的效果代码

js鼠标移动在title中显示图片的效果代码

2019年07月30日  | 移动技术网IT编程  | 我要评论
1.js代码
复制代码 代码如下:

//***********默认设置定义.*********************
tpopwait=50;//停留twait豪秒后显示提示。
tpopshow=5000;//显示tshow豪秒后关闭提示
showpopstep=20;
popopacity=99;

//***************内部变量定义*****************
spop=null;
curshow=null;
tfadeout=null;
tfadein=null;
tfadewaiting=null;

document.write("<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:468px; filter: alpha(opacity=0)}");
document.write("</style>");
document.write("<div id='dypoplayer' 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;

2.html代码包含js代码即可，使用范例
具体的看移动技术网给出的测试代码。

[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网