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


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 相关文章推荐
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
gojs实现蚂蚁线动画效果
Feb 18 Javascript
js 实现验证码输入框示例详解
Sep 23 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
php简单获取复选框值的方法
2016/05/11 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
js读取本地文件的实例
2017/12/22 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
python PIL模块与随机生成中文验证码
2016/02/27 Python
transform python环境快速配置方法
2018/09/27 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
用Python 执行cmd命令
2020/12/18 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
项目申请汇报材料
2014/08/16 职场文书
电工实训报告总结
2014/11/05 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
Python实现拼音转换
2021/06/07 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA