CSS Popup Image Viewer(Css做的图片预览效果，兼容IE,FireFox)-优快云博客

本文介绍了一种使用HTML和CSS实现的图像悬停放大效果，通过设置相对位置和绝对位置来展示图像放大预览的功能。利用CSS样式实现图像在鼠标悬停时显示放大效果，并通过JavaScript进一步增强交互体验。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.v{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
border: 1px dashed gray;
color: black;
text-decoration: none;
top: 20;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>
<script>
var t
function f()
{
var v = document.getElementById('v');
v.style.display = 'block';
}
function f1()
{
var v = document.getElementById('v');
v.style.display = 'none';
}
function over()
{
var v = document.getElementById('v');
clearTimeout(t);
v.style.display = 'block';
}
function out()
{
var v = document.getElementById('v');
v.style.display = 'none';
}
function show()
{
t=setTimeout("f1()",100);
}
</script>
</HEAD>

<BODY>
<a class="thumbnail" href="#thumb"><img src="http://www.w3c-cn.com/attachments/month_0701/v200715163122.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.w3c-cn.com/attachments/month_0701/v200715163122.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="http://www.w3c-cn.com/attachments/month_0701/v200715163122.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.w3c-cn.com/attachments/month_0701/v200715163122.jpg" /><br />So real, it's unreal. or is it?</span></a>

<br />
<br />
<div id=v1 class="thumbnail">
<a class="thumbnail" onmouseover="f();return false" onmouseout="show();return false">Dynamic Drive</a><br />
<div style="display:none" id=v class="v">
<a class="thumbnail" onmouseover="over();return false" onmouseout="out();return false" href="#thumb">Zoka Coffee</a>
</div>
</div>
</BODY>
</HTML>

转载于:https://www.cnblogs.com/linpengfeixgu/articles/1274171.html