标签：css javascript
<!doctype html>
<html>
<head>
<title>JavaScript和CSS实现详情图片显示大图特效</title>
<meta http-equiv="content/text" charset="utf-8">
<style type="text/css">
BODY {
FONT-SIZE: 14px;
LINE-HEIGHT: 1.5;
TEXT-DECORATION: none;
FONT-FAMILY: simsun, Arial, "宋体";
background-color: #FFFFFF;
}
td a:HOVER {
color: red;
background-color:#89d9fa;
}
#lookImg /*新增加大图样式*/
{
margin: 0 auto;
border: 1px solid #0F0F0F;
padding: 20px;
height:660px;
width: 480px;
background: #FFFFFF;
display: none;
position: absolute; /* 这个对显示鼠标的位置很重要，如果不是绝对位置的话，将显示的地方不一样*/
vertical-align: middle;
text-align: center;
font-family: Arial;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script>
$(function(){
$(".lookImages").mouseover(function (e) {
var p=$(this).attr("p");
var lookImg = "<div id = 'lookImg'>";
lookImg+= "<img src ='"+p+"' height='460px' width='460px' />";
lookImg+= "</div>";
$("body").append(lookImg);
$("#lookImg").css({
"bottom": (e.pageY/2) + "px",
"right": (e.pageX/2) + "px"
}).show("slow");
}).mouseout(function () {
$("#lookImg").remove();
}).mousemove(function (e) {
$("#lookImg").css({
"bottom": (e.pageY/2) + "px",
"right": (e.pageX/2) + "px"
});
});//----mouseover--end
});
</script>
</head>
<body>
<div>
<a class="lookImages" style="color: blue;cursor: pointer;"
p="http://weilailm.duapp.com/wechat/resource/images/qrcode_for_med.jpg">lookImages</a>
</div>
</body>
</html>标签：css javascript
原文地址：http://blog.csdn.net/jilongliang/article/details/43168195
