jQuery图片放大

jQuery图片放大

 

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <script src="jquery-1.7.1.min.js"></script>
        <style>
            #d{
                width:300px;
                height:300px;
                background-color:pink;
                color:white;
                display:none;
                position:absolute;
                font-size:45px;
                text-align:center;
                line-height:50px;
                font-weight:bold;
                border:10px solid pink;
                border-radius:250px;
                }
            #y{
                width:200px;
                height:200px;
                top:300px;
                left:275px;
                position:absolute;
                }
            #e{
                width:200px;
                height:200px;
                top:100px;
                left:475px;
                position:absolute;
                }
            #s{
                width:200px;
                height:200px;
                top:300px;
                left:675px;
                position:absolute;
                }
            #q{
                width:200px;
                height:200px;
                top:100px;
                left:875px;
                position:absolute;
                }
        </style>
    </head>    
    <body>
        <img id="y" src="img/img2.gif">
        <img id="e" src="img/img4.gif">
        <img id="s" src="img/img7.gif">
        <img id="q" src="img/img12.gif">
    </body>
    <script>
        $(function(){
            $("img").hover(function(){
                $("body").append("<img id='d' src='"+this.src+"'>");
                },function(){
                $("#d").remove();
                });
            $("img").mousemove(function(e){
                $("#d").css({top:(e.pageY+1)+"px"})
                    .css({left:(e.pageX+1)+"px"})
                    .show();
                });    
            });
    </script>
</html>

 

posted @ 2016-07-18 09:31  壬北  阅读(847)  评论(0)    收藏  举报