1、首先输入代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
2、然后输入代码：
<script language="javascript">
function showPic(e,sUrl){
var x,y
x = e.clientX
y = e.clientY
document.getElementById("Layer1").style.left = x+2+'px'
document.getElementById("Layer1").style.top = y+2+'px'
document.getElementById("Layer1").innerHTML = "
<img border='0' src=\"" + sUrl + "\">"
document.getElementById("Layer1").style.display = ""
}
3、然后输入代码：
function hiddenPic(){
document.getElementById("Layer1").innerHTML = ""
document.getElementById("Layer1").style.display = "none"
}
4、然后输入代码：
</script>
</head>
<body>
<div id="Layer1" style="display: none position: absolute z-index: 100">
</div>
<img src="http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg" onmouseout="hiddenPic()"
onmousemove="showPic(this.src)" />
5、然后输入代码：
<p>
<a href="" onmouseout="hiddenPic()" onmousemove="showPic(event,'http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg')">
当鼠标指到标题时,鼠标显示对应图片</a>
</p>
</body>
</html>。
6、然后就完成了。
代码有bug，修改后如下：
需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg
效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。
问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!
<!doctype html><html>
<head>
<meta charset=utf-8>
</head>
<body>
你要显示特效的html
<img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" />
<div style="width:200pxheight:80pxborder:1px solide #aaccffdisplay:none" id="divHover" >
大图片显示如下
<img src="大图片.jpg" width="500px" height="300px" id="bigimg" />
</div>
<script type="text/javascript">
let divHover = document.getElementById("divHover")
function hoverShowDiv() {
console.log("显示大图片")
divHover.style.display = "block"
divHover.style.top = document.getElementById("littleimg").style.top + 10
divHover.style.left = document.getElementById("littleimg").style.left + 10
}
function hoverHiddendiv() {
console.log("显示小图片")
divHover.style.display = "none"
}
</script>
</body>
</html>
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<script>标签中，输入js代码：
$('a').hover(function(){$('img').css('display','block')})
3、浏览器运行index.html页面，此时鼠标移动到超链接上，下面的图片自动显示了出来。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）