jQuery图片放大

最新推荐文章于 2025-09-10 09:07:54 发布

转载最新推荐文章于 2025-09-10 09:07:54 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/angelachin/p/5680083.html

文章标签：

#javascript #ViewUI

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>