本来想自己实现一个 点查询按钮 弹出一个gif图片的效果,无意中看到这段代码,感觉效果很不错。
代码实现效果:鼠标移动到名(wait.gif)上,显示图片,鼠标移开则不显示图片
做法:新建 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>[/img]
- 大小: 3.1 KB
- 大小: 6.4 KB
分享到:
相关推荐
js鼠标悬停到图片上显示文字详情效果
js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
鼠标移到Image上方时显示文字效果,仿腾讯微群广场显示效果,鼠标移动到图片上方,显示一个与图片大小一样的半透明文字框
范例使用SuperMap iClient 6R for JavaScript开发模式,使用MousePosition控件实现鼠标移动到地图上展示实际的地理坐标。
来自国外的一款放大图片的鼠标提示特效 一款鼠标提示效果,类似于放大图片,鼠标移到对应图片上,会显示出大图,能根据浏览器的显示距离将提示的图片显示在正确的位置上,把浏览器窗口调小就可以看到效果了。Js代码...
JavaScript 鼠标移上图片,变换出大图片.rarJavaScript 鼠标移上图片,变换出大图片.rarJavaScript 鼠标移上图片,变换出大图片.rar
JS实现鼠标移动到图片上显示提示内容,类似天气预报的地图alt标记提示
鼠标移上让图片抖动效果...代码有注释 可以更改成文字抖动一些效果!
鼠标移动显示图片JS代码
js制作的鼠标移到小图上显示大图的特效。 1、渐变显示大图。 2、自动调整大图显示的位置。 3、给小图片加上代码: 4、css修改样式。
本代码有两种,一种是纯JS实现的banner图片切换代码 另一种是图片左右滚动代码,鼠标移动到图片上后显示图片文字说明内容
鼠标移动到div上弹出div或者信息,并且自适应显示位置;每一步代码都有详细的解释;简单,通俗易懂
鼠标移上能弹出一个div 的下拉框,可以点击里面的链接,鼠标移开是关闭下拉框
jquery实现鼠标移动到图片上显示大图广告代码,当鼠标放在图片上,会显示放大的图片,常用于商城网站,php中文网推荐下载!
js特效鼠标悬浮显示大图,鼠标移动到图片上显示相关大图~!
NULL 博文链接:https://jeasonjack.iteye.com/blog/1630252
当鼠标移动到图片上后,动态显示另外一张(高版本浏览器下效果较好) 使用方法: 1、在网页head中引入两个css样式 2、将代码部分复制到你需要的地方 3、在最底部调用两个js文件即可
鼠标移动到小图标上,DIV框框位置显示对应的大图片,及鼠标移动到小图片上显示大图片。一款轻巧的图片特效代码,懒人之家推荐下载
JavaScript实现鼠标移入图片放大效果,JavaScript实现鼠标移入图片放大效果,好东西大家共享
前端鼠标移动到图片上给图片加个阴影背景以及文字,使之更好看