<!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.js实现一个功能，即在表格（table）中，当文字信息超过5个字符时进行隐藏，并在鼠标悬停时通过弹窗显示全部内容。这个功能在数据展示时特别有用，尤其是在处理大量文本数据时，可以...
当用户将鼠标光标移动到图片上方，图片下方会浮现一层半透明的蒙层，通常用于显示与图片相关的文字介绍或额外信息。这种效果在产品展示、相册浏览、新闻报道等场景中广泛应用。 实现这种效果的技术基础主要包括HTML...
悬浮焦点图，又称为浮动标题或悬停提示，是指当鼠标指针移到图片上时，相关文字描述会自动浮现在图片上方或下方，为用户提供更多信息。这种设计有助于提高网站的可用性和可读性，尤其适用于展示多张图片并附带简短...
透明标签控件则是用于展示文本信息的，通过设置其透明度，可以让文字仿佛浮现在窗口之上。时钟组件则提供了定时触发事件的功能，开发者可以通过设置时间间隔，使其在指定的时间间隔内执行特定的代码块。 在实现这个...
CSS3中的3D转换可以为按钮添加深度感，例如旋转、透视等，当鼠标悬停时，按钮仿佛浮现在页面上，增加了视觉冲击力。 4. **阴影效果**： 使用`box-shadow`和`text-shadow`属性，可以创建出按钮的立体阴影效果。在...
随意自由地采集文字图像并将它转化为可交流的文字代码信息是“慧视”的发展方向，不远将来人们用手机即时摄取的不同语言图像资料，瞬间就可以将翻译后的母语在手机屏幕上显示并读出声音，使得国际文化交流更顺畅。...
2、醒目文字提示：鼠标只要悬浮在图标上面，立即浮现特效文字说明，字体颜色由您定义。 3、酷爽动画效果：酷点在您拖入拖出图标时，均有酷毙的动画效果，内置多种特效让您选择。 4、自由键鼠控制：您可以使用鼠标...
这些提示通常以一个小图标或文字的形式出现，当鼠标悬停在特定元素上时，会显示出一个包含详细信息的小窗口，就像水泡一样浮现在屏幕上的相应位置。在网页设计中，这种功能可以增加用户体验，帮助用户更好地理解页面...
实例26 存上100元需要多少天 40 实例27 输出100之间的所有偶数 41 实例28 如何判断回文数字 42 3.4 do…while语句 43 实例29 输出100之间的所有奇数 44 实例30 求最大的随机数 44 3.5 ...
- **改变函数**：当鼠标悬停在容器上时，标题会从下方向上移动，直到完全显示出来。 - **返回函数**：当鼠标离开容器时，标题会缓慢地下移，直到完全隐藏。 4. **事件绑定**： - 使用 `onmouseover` 和 `...
实例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...