<!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='產(chǎn)品預(yù)覽圖'?/>"+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>按照書(shū)上敲的代碼,為什么預(yù)覽大圖效果不能正常顯示?圖一是書(shū)上正確效果,圖二是自己寫(xiě)的呈現(xiàn)效果(鼠標(biāo)預(yù)覽效果),請(qǐng)教下,這是什么問(wèn)題。
預(yù)覽大圖效果為什么不能正常顯示?
小布ever
2017-02-21 17:38:25