jquery预览图片实现鼠标放上去显示实际大小

2019/6/29 22:39:52

编程Tag： jQuery 预览图片

本文主要是介绍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预览图片实现鼠标放上去显示实际大小的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jquery预览图片实现鼠标放上去显示实际大小

相关编程文章