<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css" />
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var imgTitle=this.myTitle?"<br/>"+this.myTitle:"";
var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图' />"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
</script>
</head>
<body>
<ul >
<li><a href="images/iPhone-4s-bigger.jpg" title="iPhone 4s"><img src="images/iPhone-4s.jpg" alt="iPhone-4s" /></a></li>
<li><a href="images/iPhone-5s-bigger.jpg" title="iPhone 5s"><img src="images/iPhone-5s.jpg" alt="iPhone-5s" /></a></li>
<li><a href="images/iPhone-6s-bigger.jpg" title="iPhone 6s"><img src="images/iPhone-6s.jpg" alt="iPhone-6s" /></a></li>
<li><a href="images/iPhone-7s-bigger.jpg" title="iPhone 7s"><img src="images/iPhone-7s.jpg" alt="iPhone-7s" /></a></li>
</ul>
</body>
</html>按照书上敲的代码，为什么预览大图效果不能正常显示？图一是书上正确效果，图二是自己写的呈现效果（鼠标预览效果），请教下，这是什么问题。
添加回答
举报
0/150
提交
取消