master

分支 (1)

管理

管理

master

jquery_test
/
show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            //i表示的是序号，n是元素
//            $.each( [1,3,5], function(i, n){
//                alert( "Item #" + i + ": " + n );
//            });
            $.each( { name: "John", lang: "JS" }, function(i, n){
                alert( "Name: " + i + ", Value: " + n );
            });
            $("img").mousemove(function(eve){
               $("#mes").html("当前 鼠标位置：offsetX:"+eve.offsetX +" ,offsetY:"+eve.offsetY);
                var x=eve.offsetX*10-100;
                var y=eve.offsetY*10-100;
                $("#da").css("background","url('image/f3.jpg')"+x+"px "+y+"px");

            } );
        })
    </script>
    <style>
        *{
            margin: 0px auto;
        }
        div{
            border: #000000 solid 1px;
            display: inline-block;
        }
        #xiao{
            width:100px;
            height:100px;
        }
        #da{
            width:200px;
            height: 200px;
            background : url("image/f3.jpg")   400px 400px;
        }
    </style>
</head>
<body>
<p id="mes"></p>
<div id="xiao"><img width="100px" src="image/f3.jpg" alt="花"></div>
<div id="da">&nbsp;</div>
</body>
</html>