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


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 相关文章推荐
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
Angular实现form自动布局
Jan 28 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue实现购物车选择功能
Jan 10 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
jQuery :first选择器使用介绍
2013/08/09 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python subprocess模块学习总结
2014/03/13 Python
Python collections模块实例讲解
2014/04/07 Python
python中尾递归用法实例详解
2015/04/28 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python数据结构之单链表详解
2017/09/12 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
什么是设计模式
2012/06/17 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
投标服务承诺书
2014/05/28 职场文书
物理教育专业求职信
2014/06/25 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
三孔导游词
2015/02/05 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
一些让Python代码简洁的实用技巧总结
2021/08/23 Python