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 相关文章推荐
一个简单的jquery进度条示例
Apr 28 Javascript
js的回调函数详解
Jan 05 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
JS常用知识点整理
Jan 21 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
js实现日期级联效果
2014/01/23 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python多重继承实例
2014/10/11 Python
python3简单实现微信爬虫
2015/04/09 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
Python类属性与实例属性用法分析
2015/05/09 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python如何生成树形图案
2018/01/03 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Python无损压缩图片的示例代码
2020/08/06 Python
汽车装潢店创业计划书范文
2014/02/05 职场文书
幼儿教师工作感言
2014/02/14 职场文书
艺术节开幕词
2015/01/28 职场文书
安全责任书
2015/01/29 职场文书
环保证明
2015/06/23 职场文书