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


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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jquery选择器使用详解
Apr 08 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
JavaScript oncopy事件用法实例解析
May 13 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
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
javascript实现简单的分页特效
2015/08/12 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
对Python 语音识别框架详解
2018/12/24 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python 字符串池化的前提
2020/07/03 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
送货司机岗位职责
2013/12/11 职场文书
爱国主义演讲稿
2014/05/07 职场文书
食品流通安全承诺书
2014/05/22 职场文书
岗位说明书标准范本
2014/07/30 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
使用Python开发冰球小游戏
2022/04/30 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis