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


Posted in Javascript onDecember 25, 2013

一、js代码

//***********默认设置定义.*********************   
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>

js 鼠标移动显示图片的简单实例
Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
纯js简单日历实现代码
Oct 05 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 #Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 #Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 #Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 #Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 #Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 #Javascript
JS中如何设置readOnly的值
Dec 25 #Javascript
You might like
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
详解js闭包
2014/09/02 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现冒泡排序的简单应用示例
2017/12/11 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python flask中动态URL规则详解
2019/11/22 Python
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
元旦联欢会策划方案
2014/06/11 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
领导干部考核评语
2015/01/04 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
植树节新闻稿
2015/07/17 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android