JQuery 實現的預覽大圖功能 但目前無法預覽 求大神指教

本帖最后由 dongdongsdo0310 于 2012-01-04 17:26:02 编辑

解决方案 »

  1.   

    最明显的错误就是你的.css方法，少了逗号
    .css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});
      

  2.   

    还有就是if("a.tooltip")，是不是$("a.tooltip")？？
      

  3.   

    你的语法错误很多，乱就一个字，改成这样了，你自己看吧<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Insert title here</title>
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
            var x = 10;
            var y = 20;
            $(".tooltip img").mouseover(function(e){
                var myTitle = $(this).attr("title");
                var imgTitle = myTitle ? "<br/>" + myTitle : "";
                var tooltip = "<div id='tooltip'><img src='"+ $(this).attr("src") +"'/>"+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="#" class="tooltip"><img src="images/okidc0021.jpg" width="50px" height="50px;" alt="" title ="no.1"/></a></li>
            <li><a href="#" class="tooltip"><img src="images/okidc0031.jpg" width="50px" height="50px;" alt="" title ="no.1"/></a></li>
            <li><a href="#" class="tooltip"><img src="images/okidc0041.jpg" width="50px" height="50px;" alt="" title ="no.3"/></a></li>
            <li><a href="#" class="tooltip"><img src="images/okidc0051.jpg" width="50px" height="50px;" alt="" title ="no.4"/></a></li>
        </ul>
    </body>
    </html>
      

  4.   

    if("a.tooltip").mouseover(function(e){
    改成
    $("a.tooltip").mouseover(function(e){$("#tooltip")
    .css({
    "top": (e.pageY+y) + "px"
    "left": (e.pageX+x) + "px"
    }).show("fast");
    改成
    $("#tooltip")
    .css({
    "top": (e.pageY+y) + "px",
    "left": (e.pageX+x) + "px"
    }).show("fast");$("#tooltip")
    .css({
    "top": (e.pageY+y) + "px"
    "left": (e.pageX+x) + "px"
    });
    改成
    $("#tooltip")
    .css({
    "top": (e.pageY+y) + "px",
    "left": (e.pageX+x) + "px"
    });
      

  5.   

    对于这样的问题，一般都是以找插件为主，如果是自己写也可以，主要是要花时间：
    http://www.zhangxinxu.com/study/200910/jQuery-plugin-image-big-show.html
    这个可以参考一下