鼠标移动到图片名上,显示图片的简单实例


Posted in Javascript onJuly 14, 2013

鼠标移动到图片名上,显示图片的简单实例

做法:新建 a.html 和 一个待显示图片 wait.gif  放在同一目录下,
a.html 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var path = './'; //图片相对路径
        function show(obj) {
            var name = obj.innerText;
            var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
            if (!sDiv) {
                sDiv = document.createElement("DIV");
                sDiv.id = 'img_' + name.split('.')[0];
                sDiv.style.position = 'absolute';
                sDiv.style.top = obj.offsetTop + obj.offsetWidth + 'px';
                sDiv.style.left = obj.offsetLeft +obj.offsetHeight + 'px';
                sDiv.style.border = '1px red solid';
                var img = document.createElement("img");
                img.src = path + name;
                sDiv.appendChild(img);
                document.body.appendChild(sDiv);
            }
            sDiv.style.display = 'block';
        }
        function f(obj) {
            var name = obj.innerText;
            var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
            if (sDiv) {
                sDiv.style.display = 'none';
            }
        }
    </script>
</head>
<body>
<div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
    wait.gif
</div>
</body>
</html>
Javascript 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
js使用心得分享
Jan 13 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
layUI实现列表查询功能
Jul 27 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
JS中获取数据库中的值的方法
Jul 14 #Javascript
js 实现日期灵活格式化的小例子
Jul 14 #Javascript
仿谷歌主页js动画效果实现代码
Jul 14 #Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 #Javascript
jquery实现输入框动态增减的实例代码
Jul 14 #Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 #Javascript
js和as的稳定传值问题解决
Jul 14 #Javascript
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP-redis中文文档介绍
2013/02/07 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python ldap实现登录实例代码
2016/09/30 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
python访问hdfs的操作
2020/06/06 Python
Python多线程的退出控制实现
2020/08/10 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
华为的Java面试题
2014/03/07 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
党员先进事迹材料
2014/12/19 职场文书
运动会广播稿300字
2015/08/19 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript