JS教程:鼠标悬停文字上显示图片

撒娇的感慨

撒娇的感慨

2016-02-20 00:55

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是JS教程:鼠标悬停文字上显示图片,一起来学习了解下吧!

效果如下所示:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

 html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titleJS教程:鼠标悬停文字上显示图片/title
script language="javascript"
function showPic(sUrl){
var x,y;
x = event.clientX;
y = event.clientY;
document.getElementById("Layer1").style.left = x;
document.getElementById("Layer1").style.top = y;
document.getElementById("Layer1").innerHTML = "img src="" + sUrl + """;
document.getElementById("Layer1").style.display = "block";
}
function hiddenPic(){
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
/script
/head
body
div id="Layer1" style="display:none;position:absolute;z-index:1;"/div
img src="/images/Logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /
p/p
/body
/html

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

JS教程:鼠标悬停文字上显示图片

Web开发
JS教程:鼠标悬停文字上显示图片

wps演示教程:鼠标悬停效果制作

电脑入门
wps演示教程:鼠标悬停效果制作

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页表单实现鼠标悬停交互效果

Web开发
网页表单实现鼠标悬停交互效果

Photoshop设计导航鼠标悬停状态效果

鼠标 设计
Photoshop设计导航鼠标悬停状态效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

一个优秀的超链接鼠标悬停提示CSS+js

Html CSS布局 Div+CSS XHTML
一个优秀的超链接鼠标悬停提示CSS+js

CSS:网页表单实现鼠标悬停交互效果

Web开发
CSS:网页表单实现鼠标悬停交互效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

js教程:JavaScript作用域(Scope)

js教程:JavaScript作用域(Scope)

11大金牌免费网络视频客户端横评

11大金牌免费网络视频客户端横评
下拉加载更多内容 ↓