黑马程序员技术交流社区

标题: Jquery [打印本页]
作者: 罗代势    时间: 2012-11-13 12:12
标题: Jquery
本帖最后由 罗代势 于 2012-11-24 13:58 编辑

    <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
    <style type="text/css">
    #huyingyi{         //这里的#号为什么不能换成“.”   ????????????????
position:absolute;
border:1px solid #ccc;
background:#333;  
padding:2px;
display:none;
color:#fff;}
    </style>
    <script type="text/javascript">        /
            var x = 10;
            var y = 20;
            $("a.huyingyi").mouseover(function(e) {
                var jiedian = $("<div id='huyingyi'><img src='"+this.href + "'alt='美女' /></\div>");               
$("body").append(jiedian);
     $("#huyingyi") .css({
       "top": (e.pageY + y) + "px",
       "left": (e.pageX + x) + "px"
   }).show("fast");
            }).mouseout(function() {
                $("#huyingyi").remove();
            }).mousemove(function(e) {
            $("#huyingyi").css({"top": (e.pageY + y) + "px","left": (e.pageX + x) + "px"})
            });
        });
    </script>
</head>
<body>
<a href="imges/胡影怡.jpg" class="huyingyi" title="胡影怡"><img src="imges/胡影怡ss.jpg" alt="胡影怡1" /></a>
</body>
作者: 吴步兵    时间: 2012-11-13 23:00
这段代码运行肯定提示$("a.huyingyi")不存在吧，代码有问题，JQuery是在BODY之间的元素还没加载就运行了。这时候$("a.huyingyi")是还没渲染出来的。
  1. $(function () {
  2.             var x = 10;
  3.             var y = 20;
  4.             $("a.huyingyi").mouseover(function(e) {
  5.                 var jiedian = $("<div id='huyingyi'><img src='"+this.href + "'alt='美女' /></\div>");               
  6. $("body").append(jiedian);
  7.      $("#huyingyi") .css({
  8.        "top": (e.pageY + y) + "px",
  9.        "left": (e.pageX + x) + "px"
  10.    }).show("fast");
  11.             }).mouseout(function() {
  12.                 $("#huyingyi").remove();
  13.             }).mousemove(function(e) {
  14.             $("#huyingyi").css({"top": (e.pageY + y) + "px","left": (e.pageX + x) + "px"})
  15.             });
  16.         });
  17.         });
复制代码
试试



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2