jquery 放大图片 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-2.1.1.min.js" ></script>
</head>
<script type="text/javascript">
    $(function(){
        var x=10;
        var y=-20;
        $("a.tooltip").mouseover(function(e){  //当鼠标指针位于元素上方时，会发生 mouseover 事件。
            this.mutitle=this.title; //获取当前的元素的title
            this.title="";
           var imgtitle=this.mutitle?"<br/>"+this.title:"";
            var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='预览效果 '/>"+imgtitle+"</div>";
            $('body').append(tooltip);  //追加文档
            $("#tooltip").css({
                "top":(e.pageY+y)+"px",
                "left":(e.pageX+x)+"px"
            }).show('fast');    //设置坐标 x和y，显示
        }).mouseout(function(){   //鼠标移开时候
            this.title=this.mutitle;
            $('#tooltip').remove(); //删除这个id
        }).mousemove(function(e){ //当鼠标指针在指定的元素中移动时
            $('#tooltip').css({ //显示的位置
                "top":(e.pageY+y)+"px",
                "left":(e.pageX+x)+"px"
            });
        });
    })
    //图片放大

    /*
    * 鼠标移动元素时
    * 创建一个div元素 并且附带着放大的图片效果
    *追加当当前文档当中
    * 设置 图片的位置 并显示show（‘fast’）快
    *
    * 鼠标离开的时候 删除创建的id
    *
    * 当鼠标移动时候 速则设置放大图片的位置
    * */
</script>
<style>
    img
    {

    }
</style>
<body>
<ul>
    <li><a href="2.jpg" title="mac "   class="tooltip" ><img src="2.jpg" alt="mac" /></a></li>
</ul>

</body>
</html>

 

posted @ 2015-11-05 15:37  尘梦  阅读(300)  评论(0)    收藏  举报