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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
vue 子组件修改data或调用操作
Aug 07 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
Django中Middleware中的函数详解
2019/07/18 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
赔偿协议书范本
2014/04/15 职场文书
有关爱国演讲稿
2014/05/07 职场文书
结婚堵门保证书
2015/05/08 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
MySQL系列之六 用户与授权
2021/07/02 MySQL