效果图展示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float: left;
display:inline;
margin-right:30px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
.tooltip{
transition:1s 3s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 3s;
}
</style>
<script>
function GetAbsPosition(obj)
{
var curleft = 0, curtop = 0;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
function ShowFloatingImage(image, width, height)
{
var id = "trailimageid";
var newdiv = document.getElementById(id);
if(newdiv == null)
{
newdiv = document.createElement('div');
newdiv.setAttribute('id',id);
newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
document.body.appendChild(newdiv);
}
newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';
var absPos = GetAbsPosition(image);
newdiv.style.position = "absolute";
newdiv.style.posLeft = absPos[0] - width/2;
newdiv.style.posTop = absPos[1] - height/2;
newdiv.style.display="block";
}
function HideElement(id)
{
var elem = document.getElementById(id);
elem.style.display="none";
}
</script>
</head>
<body>
<ul>
<li><a href="iphone5s-big.jpg" class="tooltip" title="iphone5s"><img src="iphone5s-small.jpg" alt="苹果 iPod" onmouseover="ShowFloatingImage(this, 150, 150)" /></a></li>
<li><a href="samsung-big.jpg" class="tooltip" title="三星Note"><img src="samsung-small.jpg" alt="苹果 iPod nano" onmouseover="ShowFloatingImage(this, 150, 150)" /></a></li>
<li><a href="xiaomiM4-big.jpg" class="tooltip" title="小米M4"><img src="xiaomiM4-small.jpg" alt="苹果 iPhone" onmouseover="ShowFloatingImage(this, 150, 150)" /></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
转载：https://blog.csdn.net/weixin_48093247/article/details/106729979
查看评论