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+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
关于HTML5的data-*自定义属性的总结
May 05 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
PHP7新增函数
2021/03/09 PHP
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
原生js实现购物车
2020/09/23 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python验证企业工商注册码
2015/10/25 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python实现简单飞行棋
2020/02/06 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
工作自荐信
2013/12/11 职场文书
公司管理建议书范文
2014/03/12 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
法院答辩状格式
2015/05/22 职场文书
生日寿星公答谢词
2015/09/29 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android