jquery预览图片实现鼠标放上去显示实际大小
更新时间：2014年01月16日 15:58:51 作者：
本文为大家介绍的这个示例为jquery实现的预览图片，当鼠标放上去显示实际大小，感兴趣的朋友可以学习下
复制代码 代码如下:
<!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>jQuery图片预览-jQuery在线演示-jQuery学习</title>
<link href="http://www.jquery001.com/css/Stylesheet_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
img
{
border: none;
}
ul, li
{
margin: 0;
padding: 0;
}
li
{
list-style: none;
float: left;
display: inline;
margin-right: 10px;
}
#imglist img
{
width: 150px;
height: 120px;
}
#imgshow
{
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 5px;
color: #fff;
display: none;
}
</style>
<script type="text/javascript">
var ShowImage = function () {
xOffset = 10;
yOffset = 30;
$("#imglist").find("img").hover(function (e) {
$("<img id='imgshow' src='" + this.src + "' />").appendTo("body");
//下面是两种样式赋值方法
//$("#imgshow").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow");
$("#imgshow").css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px"}).fadeIn("slow");
}, function () {
$("#imgshow").remove();
});
};
jQuery(document).ready(function () {
ShowImage();
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="content-wrap">
<div id="content-left" class="demo">
<ul id="imglist">
<li><a>
<img src="http://g.hiphotos.baidu.com/image/w%3D2048/sign=0a53d9eca1cc7cd9fa2d33d90d39203f/35a85edf8db1cb13efa8fe12df54564e93584bea.jpg" alt="图片" /></a></li>
<li><a>
<img src="http://a0.att.hudong.com/70/44/14300000029584127555444098375.jpg" alt="图片" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
相关文章
这篇文章主要介绍了jQuery前端分页示例分享的相关资料,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery插件zepto.js简单实现tab切换的代码，十分的简洁，有需要的小伙伴可以参考下2015-06-06
上文介绍了如何筛选到需要的元素。得到了元素之后就要对其进行操作。2010-03-03
jQuery是一个非常好用的javascript框架，我尤其喜欢它强大的选择器和链式表达式，使得我们能通过简单的语句实现复杂的功能。它还有一个重要的特点就是它的可扩展性，使得很多人都可以开发他们的插件并且分享出来2011-12-12
focus函数可以用来发生点击某个按钮或者提交值错误等触发事件发生时把焦点给到某个元素,具体用法如下，感兴趣的朋友可以参考下2013-08-08
现在任何事务都追求效率和人性化，当然网页效果也是如此，如果一个可以编辑数据的表格，编辑到最后一行的时候，点击可以自动添加一行，这样算是一个比较人性化的效果，可以免去一丝劳顿之苦，下面分享一段这样的代码2016-01-01
大家都知道map()方法主要用来遍历操作数组和对象，这篇文章将给大家详细介绍关于jQuery遍历map()方法的内容，文章给出了详细的示例代码，对大家的理解和学习很有帮助，有需要的朋友们下面来一起学习学习吧。2016-11-11
这篇文章主要为大家详细介绍了jQuery实现文章收起与展开功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了jQuery的$.extend 浅拷贝与深拷贝的相关资料,需要的朋友可以参考下2017-03-03
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
这篇文章主要介绍了详解Jquery 遍历数组之$().each方法与$.each()方法介绍 ,具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
最新评论