预览大图效果为什么不能正常显示？

<!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>

按照书上敲的代码，为什么预览大图效果不能正常显示？图一是书上正确效果，图二是自己写的呈现效果（鼠标预览效果），请教下，这是什么问题。

小布ever

浏览 1618回答 3

3回答

小布ever

奇怪了，提问中的a标签的class属性会被吞掉，明明加了，但是保存就没了。

0 0

随时随地看视频慕课网APP