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 EasyUI 对话框的使用方法
Oct 24 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
react组件基本用法示例小结
Apr 27 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
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
jQuery事件用法详解
2016/10/06 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
js module大战
2019/04/19 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Python中删除文件的程序代码
2011/03/13 Python
python小技巧之批量抓取美女图片
2014/06/06 Python
Python中的装饰器用法详解
2015/01/14 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python读取csv文件实例解析
2019/12/30 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
2014年小学德育工作总结
2014/12/05 职场文书
2016春节放假通知范文
2015/08/18 职场文书
财务人员入职担保书
2015/09/22 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
工作一年自我鉴定
2019/06/20 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB