<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Preview with jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
xOffset = 10;
yOffset = 30;
$("a.preview").hover(
function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />" + c + "</p>");
$("#preview").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
}, function() {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(
function(e) {
$("#preview").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});
});
</script>
<style>
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
h1 {
font-size: 180%;
font-weight: normal;
color: #555;
}
h2 {
clear: both;
font-size: 160%;
font-weight: normal;
color: #555;
margin: 0;
padding: .5em 0;
}
a {
text-decoration: none;
color: #f30;
}
p {
clear: both;
margin: 0;
padding: .5em 0;
}
pre {
display: block;
font: 100% "Courier New", Courier, monospace;
padding: 10px;
border: 1px solid #bae2f0;
background: #e3f4f9;
margin: .5em 0;
overflow: auto;
width: 800px;
}
img {
border: none;
}
ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
display: inline;
margin-right: 10px;
}
#preview {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 5px;
display: none;
color: #fff;
}
</style>
</head>
<body>
<h1>Easy Image Preview with jQuery</h1>
<h2>Image gallery (without caption)</h2>
<ul>
<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>
<h2>Image gallery (with caption)</h2>
<ul>
<li><a href="1.jpg" class="preview" title="Lake and a mountain"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview" title="Fly fishing"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview" title="Autumn"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview" title="Skiing on a mountain"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>
</body>
</html>
分享到：
相关推荐
主要介绍了使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
随意自由地采集文字图像并将它转化为可交流的文字代码信息是“慧视”的发展方向，不远将来人们用手机即时摄取的不同语言图像资料，瞬间就可以将翻译后的母语在手机屏幕上显示并读出声音，使得国际文化交流更顺畅。...
2、醒目文字提示：鼠标只要悬浮在图标上面，立即浮现特效文字说明，字体颜色由您定义。 3、酷爽动画效果：酷点在您拖入拖出图标时，均有酷毙的动画效果，内置多种特效让您选择。 4、自由键鼠控制：您可以使用鼠标...
实例26 存上100元需要多少天 40 实例27 输出100之间的所有偶数 41 实例28 如何判断回文数字 42 3.4 do…while语句 43 实例29 输出100之间的所有奇数 44 实例30 求最大的随机数 44 3.5 ...
实例26 存上100元需要多少天 40 实例27 输出100之间的所有偶数 41 实例28 如何判断回文数字 42 3.4 do…while语句 43 实例29 输出100之间的所有奇数 44 实例30 求最大的随机数 44 3.5 switch...
实例26 存上100元需要多少天 40 实例27 输出100之间的所有偶数 41 实例28 如何判断回文数字 42 3.4 do…while语句 43 实例29 输出100之间的所有奇数 44 实例30 求最大的随机数 44 3.5 switch语句 45 实例31 判断字母...
实例146 复制图片 219 实例147 随机读写Java类文件 221 第3篇 Java面向对象编程 第8章 面向对象（教学视频：72分钟） 226 8.1 类 226 实例148 简单的通讯录类 226 实例149 简单的长度单位转换类 227 实例150 卡车和...
实例26 存上100元需要多少天 40 实例27 输出100之间的所有偶数 41 实例28 如何判断回文数字 42 3.4 do…while语句 43 实例29 输出100之间的所有奇数 44 实例30 求最大的随机数 44 3.5 switch语句 45 实例31 ...
◆如何将一个提示的声音发到声卡上◆ 17 ◆如何得到打开exe的带的参数◆ 17 ◆如何在框架上建立一个工具条◆ 17 ◆如何生成一个主窗口下方的状态条◆ 18 ◆如何让Cscrollview类中控制其可以流动区域大小◆ 19 ◆MFC...
◆如何将一个提示的声音发到声卡上◆ 17 ◆如何得到打开exe的带的参数◆ 17 ◆如何在框架上建立一个工具条◆ 17 ◆如何生成一个主窗口下方的状态条◆ 18 ◆如何让Cscrollview类中控制其可以流动区域大小◆ 19 ◆MFC...